Este artículo describe el método de JS para evitar parpadeos cuando DIV Layout se desplaza, y se comparte con usted para su referencia. Los métodos específicos son los siguientes:
He estado expuesto al rendimiento de la página recientemente, y hay muchos contenidos sutiles y originales, como la representación del navegador. Hay mucha información, así que elegí algo para la traducción y el memorando.
JavaScript escribe y lee DOM varias veces y hace que ocurran "baches de diseño", lo que hace que el documento refleje el proceso de construcción de un árbol de renderizado
La copia del código es la siguiente: de un Tree Dom1).
// leer
var h1 = element1.clientHeight;
// escribir (el diseño no es válido)
element1.style.height = (h1 * 2) + 'px';
// leer (versión táctil)
var h2 = element2.clientHeight;
// escribir (el diseño no es válido)
element2.style.height = (h2 * 2) + 'px';
// leer (versión táctil)
var h3 = element3.clientHeight;
// escribir (el diseño no es válido)
element3.style.height = (h3 * 2) + 'px';
Cuando se escribe el DOM, el diseño no es válido y necesita ser reorganizado en un cierto punto en el tiempo. Pero el navegador es perezoso y quiere esperar hasta que termine la operación actual (o marco) antes de reorganizar.
Sin embargo, si leemos los valores geométricos del DOM antes del final de la operación actual (o marco), entonces obligamos al navegador a reorganizar el diseño por adelantado. Esto se llama "diseño sincano forzado", que matará el rendimiento.
En los navegadores de escritorio modernos, los efectos secundarios de los diseños baches pueden no ser obvios; Pero en dispositivos móviles de gama baja, el problema es grave.
Solución rápida
En un mundo ideal, podemos leer y escribir DOM en lotes simplemente reorganizando la orden de ejecución del código. Esto significa que el documento debe reordenarse de una vez.
Copie el código de la siguiente manera:/ Leer
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// escribir (el diseño no es válido)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';
// Los documentos se reorganizan al final del marco
Entonces, ¿qué pasa con el mundo real?
No es tan simple en realidad. En los programas grandes, los códigos se extienden por todas partes, y hay DOM tan peligrosos. No podemos fácilmente (y obviamente no deberíamos) mezclar nuestro hermoso código de descremado solo para controlar la orden de ejecución. Entonces, para optimizar el rendimiento, ¿cómo leemos y escribimos por lotes?
Ven a conocer el requestanimationFrame
Window.RequestanimationFrame Schedule Una función que se ejecutará en el siguiente cuadro, similar a SetTimout (FN, 0). Esto es muy útil porque podemos usarlo para programar todas las operaciones de escritura DOM para ejecutarse juntas en el siguiente cuadro, y las operaciones de lectura de DOM se ejecutarán sincrónicamente en el orden actual.
Copie el código de la siguiente manera:/ Leer
var h1 = element1.clientHeight;
// Escribir
requestAnimationFrame (function () {
element1.style.height = (h1 * 2) + 'px';
});
// leer
var h2 = element2.clientHeight;
// Escribir
requestAnimationFrame (function () {
element2.style.height = (h2 * 2) + 'px';
});
...
Espero que la descripción en este artículo sea útil para la programación web de todos basada en JavaScript.