¿Refluir (refluir) y repintar (repintar)? ¿Cómo reducir reflujos y repintados?
document.write redistribuye toda la página
InnerHTML puede redibujar parte de la página
1. Cree un árbol DOM (análisis): el motor de renderizado analiza la Documento HTML. Primero, convierta las etiquetas en nodos DOM en el árbol DOM (incluidas las etiquetas generadas por js) para generar el árbol de contenido (árbol de contenido/árbol DOM
2. Construya el árbol de representación (construcción); ): analiza la información del archivo de estilo CSS correspondiente (incluidos los estilos generados por js y archivos css externos), y la información e instrucciones de estos archivos visibles en HTML (como lt; bgt; lt; / bgt;), construye el árbol de renderizado (Rendering Árbol/Árbol de marco);
3. Árbol de representación de diseño (reflujo/diseño): se llama recursivamente desde el nodo raíz, calcula el tamaño, la posición, etc. de cada elemento y proporciona las coordenadas precisas de cada uno. nodo que debería aparecer en la pantalla;
4. Dibuje el árbol de renderizado (pintar/repintar): recorra el árbol de renderizado y use la capa backend de la interfaz de usuario para dibujar cada nodo.
Repintar o volver a dibujar: cuando se determina la posición, el tamaño y otras propiedades del cuadro, como el color, el tamaño de fuente, etc., el navegador dibujará estos colores primarios de acuerdo con sus respectivas características presentes. contenido en la página. Redibujar se refiere al comportamiento del navegador provocado por un cambio en la apariencia de un elemento. El navegador se volverá a dibujar en función de los nuevos atributos del elemento para darle una nueva apariencia.
Condiciones que desencadenan el redibujado: cambiar los atributos de apariencia del elemento. Tales como: color, color de fondo, etc.
Reflujo (reconstrucción/reflujo/reflujo): cuando es necesario reconstruir parte (o la totalidad) del árbol de renderizado debido a cambios en el tamaño, diseño, ocultación, etc. de los elementos, esto se llama reflujo. (reflujo). Cada página debe redistribuirse al menos una vez, cuando se carga por primera vez.
La relación entre redibujado y reflujo: durante el reflujo, el navegador invalidará la parte afectada del árbol de representación y reconstruirá esta parte del árbol de representación. Después de completar el reflujo, el navegador volverá a dibujar la parte afectada. movido a la pantalla, un proceso llamado volver a dibujar.
El reflujo definitivamente causará un redibujo, pero el redibujo no necesariamente causará un redibujo.
Condiciones para activar el reflujo: cualquier cambio en el diseño de la página y las propiedades geométricas activará el reflujo, como por ejemplo:
1. Inicialización de la representación de la página (inevitable)
2. Agregue o elimine elementos DOM visibles;
3. Cambie la posición del elemento o use animación
4. Cambie el tamaño del elemento: tamaño, margen, borde;
5. Cambios en el tamaño de la ventana del navegador (cuando ocurre el evento de cambio de tamaño
6. Cambios en el contenido de relleno, como cálculos causados por cambios en el texto o cambios en el tamaño de la imagen); Cambios en el valor de ancho y alto;
7. Lea ciertos atributos de elementos: (offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE))
Se produce un redibujado:
El redibujado ocurre cuando se cambia la apariencia visible del elemento, pero no afecta el diseño cuando. Por ejemplo, solo modifique el color de fuente de los elementos DOM (solo repinte, porque no es necesario ajustar el diseño)
El costo de volver a dibujar y reorganizar: requiere mucho tiempo y hace que el navegador se ralentice.
1. Optimización propia del navegador: el navegador mantendrá una cola, colocará todas las operaciones que provocarán el reflujo y el redibujo en esta cola, y esperará hasta que las operaciones en la cola alcancen un cierto número o alcancen un cierto intervalo de tiempo, el navegador vaciará la cola y realizará un proceso por lotes. Esto convertirá múltiples reflujos y redibujados en un solo reflujo y redibujado.
2. Debemos prestar atención a la optimización: si queremos reducir el redibujado y la reorganización, debemos reducir las operaciones en el árbol de renderizado. Luego podemos fusionar múltiples modificaciones de estilo y DOM. Y reduzca las solicitudes de estilos de estilo.
(1) Cambie directamente el nombre de clase del elemento
(2) visualización: ninguno; primero configure el elemento para mostrar: ninguno; luego realice el diseño de la página y otras operaciones; una vez completada la configuración, configure el elemento Para visualización: bloquear; en este caso, solo se activarán dos redibujos y reflujos
(3) No acceda con frecuencia al atributo de cola de descarga del navegador; acceder a él, puede utilizar el caché. Almacene el valor al que se accede y el uso posterior no provocará un reflujo;
// Por ejemplo, el elemento myElement se mueve en diagonal, un píxel a la vez. Termina en 500*500 píxeles. Puedes hacer esto en el cuerpo del bucle de tiempo de espera
// Obviamente, este método es ineficiente. El desplazamiento debe consultarse cada vez que se mueve, lo que hace que el navegador actualice la cola de renderizado, lo que no favorece la optimización. . Una buena forma es obtener el valor de la posición inicial una vez y luego asignarlo a una variable. De la siguiente manera
(4) Utilice cloneNode (verdadero o falso) y reemplace la tecnología Child para activar un reflujo y volver a dibujar.
(5) Para los elementos que deben reorganizarse varias veces, colóquelos; atributos Establecidos en absoluto o fijo, el elemento está fuera del flujo del documento y sus cambios no afectarán a otros elementos;
(6) Si necesita crear varios nodos DOM, puede usar DocumentFragment para crear y agréguelos todos a la vez al documento;
(7) Trate de no utilizar el diseño de tabla.
Independientemente de si la página se vuelve a dibujar o redistribuir, afectarán el rendimiento (lo más terrible es el reflujo, que debe evitarse tanto como sea posible)
DOM: describe la estructura de la página
render: describe cómo se representan los nodos DOM (nodos) en la página
Cuando las propiedades de un elemento DOM cambian (como el color), el navegador notificará al render para volver a renderizar el elemento correspondiente. Este proceso se llama repintar.
Si el cambio implica el diseño del elemento (como el ancho), el navegador descarta los atributos originales, recalcula y pasa los resultados al renderizado para volver a dibujar los elementos de la página.
Estos dos procesos consumen mucho rendimiento del navegador. De la diferencia en la velocidad de representación de la página entre la serie IE y Chrome, podemos ver que el motor de representación no es necesariamente eficiente en el cálculo de los valores correspondientes. Se producirán repintados o reflujos cuando se operen elementos, por lo que si no tiene cuidado al escribir interacciones DOM, el rendimiento de la página será bajo.
El proceso de representación de la página es el siguiente:
Texto original:
/sinat_37328421/article/details/54575638
/sophia_little/article/details/79613990
/qq_34255080/article/details/ 86235234