Comprender la ruta crítica de renderizado de HTML
El conocimiento de CRP es muy útil para comprender cómo mejorar el rendimiento del sitio. CRP se divide en seis etapas:
El árbol DOM (modelo de objetos de documento) es una representación de objetos de una página HTML completamente analizada. A partir del elemento raíz,
Tome este archivo de muestra como ejemplo -
Esto creará el siguiente árbol DOM -
Un beneficio de HTML es que se puede ejecutar parcialmente. No es necesario cargar el documento completo para que el contenido comience a aparecer en la página. Sin embargo, otros recursos (CSS y JavaScript) pueden impedir que la página se muestre.
CSSOM (CSS Object Model) es una representación de objetos de estilos asociados con el DOM. Se representa de manera similar al DOM, pero incluye estilos asociados para cada nodo, ya sea que estén declarados explícitamente o heredados implícitamente.
En el documento style.css del archivo anterior tenemos los siguientes estilos -
Esto creará el siguiente árbol CSSOM -
CSS se considera "bloqueo de renderizado" recurso". Esto significa que el árbol de renderizado no se puede construir sin antes analizar completamente el recurso. A diferencia de HTML, CSS no se puede utilizar parcialmente debido a su naturaleza en cascada. Los estilos definidos más adelante en el documento pueden anular y cambiar los estilos definidos previamente. Por lo tanto, si comenzamos a usar estilos CSS definidos anteriormente en la hoja de estilos antes de analizar toda la hoja de estilos, podemos encontrarnos con una situación en la que se aplica el CSS incorrecto. Esto significa que el CSS debe analizarse por completo antes de que podamos pasar a la siguiente etapa.
Los archivos CSS solo se aplican al dispositivo actual y se consideran bloqueadores de renderizado. Este
CSS también se puede "bloquear script". Esto se debe a que el archivo JavaScript no se puede ejecutar hasta que se complete la construcción del CSSOM.
JavaScript se considera un "recurso de bloqueo del analizador". Esto significa que JavaScript ha bloqueado el análisis del documento HTML.
Cuando llega el analizador
Para evitar que el analizador bloquee JavaScript, se puede cargar de forma asincrónica aplicando el atributo async.
El árbol de renderizado es una combinación de DOM y CSSOM. Es un árbol que representa el contenido que finalmente aparecerá en la página. Esto significa que solo captura contenido visible, excluyendo los elementos mostrados: por ejemplo, no ocultos por CSS.
Utilizando el ejemplo DOM y CSSOM anterior, se crearía el siguiente árbol de representación:
El diseño es lo que determina el tamaño de la ventana gráfica y proporciona contexto para los estilos CSS que dependen de él. , como porcentajes o unidades de ventana gráfica. El tamaño de la ventana está determinado por la etiqueta de metaventana proporcionada en el encabezado del documento. Si no se proporciona ninguna etiqueta, el ancho predeterminado de la ventana es 980 píxeles.
Por ejemplo, el valor de metavista más común es establecer el tamaño de la ventana gráfica para que corresponda al ancho del dispositivo.
Si el usuario accede a la página en un dispositivo con un ancho de 1000px, el tamaño se basará en esta unidad. La mitad de la ventana gráfica será de 500 píxeles, 10vw serán de 100 píxeles, y así sucesivamente.
Finalmente, en el paso de "pintar", el contenido visual de la página se puede convertir en píxeles para mostrarlo en la pantalla.
La duración del paso de dibujo depende del tamaño del DOM y de los estilos aplicados. Algunos estilos requieren más trabajo que otros. Por ejemplo, una imagen de fondo con un degradado complejo requiere más tiempo que una imagen de fondo simple con un color sólido.
Para ver la ruta de renderizado crítica que se está procesando, podemos inspeccionarla en DevTools. En Chrome, está en la pestaña Línea de tiempo (en Canary, que pronto será una versión estable de Chrome, pasó a llamarse Rendimiento).
Por ejemplo, nuestro HTML de muestra (agregado).
Si miramos el registro de eventos de carga de la página, obtenemos la siguiente información:
Basado en esta información, Nosotros puedes decidir cómo optimizar la "ruta de renderizado crítica"
Comprender la ruta de renderizado crítica