Recientemente, estoy aprendiendo la optimización del rendimiento del front-end. Es necesario comprender el proceso de representación de la página para prescribir el medicamento correcto y descubrir el cuello de botella de rendimiento. Las siguientes son algunas cosas que he visto, y las compartiré contigo.
Referencia: Comprender al renderizador
La representación de la página tiene las siguientes características :• Polling de eventos de un solo subproceso
• Operación claramente definida, continua y ordenada (HTML5)
• Partición y construcción de árboles dom
• Solicitar recursos y precargar
• Construir árboles y dibujar páginas
Específicamente :Cuando obtenemos los bytes correspondientes de HTML de la red, el árbol DOM comienza a construirse. El hilo que actualiza la interfaz de usuario es responsable del navegador. La construcción del árbol dom se bloquea cuando:
• El flujo de respuesta HTML está bloqueado en la red
• Hay scripts descargados
• Se encontró el nodo del script, pero todavía había un archivo de estilo descargado en este momento
El árbol de renderizado está construido desde el árbol DOM y será bloqueado por el archivo de estilo.
Dado que se basa en la encuesta de eventos de un solo hilo, incluso si no hay bloqueo de scripts y estilos, la representación de la página se bloqueará cuando estos scripts o estilos sean analizados, ejecutados y aplicados.
Algunos casos en que la representación de la página no bloquea :• Atributos de diferir definidos y atributos asíncronos
• El archivo de estilo sin tipo de medios coincidentes
• No se inserta nodo o nodo de estilo de script a través del analizador
Aquí, ilustramos esto con un ejemplo (código completo) :Copiar el código