Los árboles de CSSOM y DOM se combinan en un árbol de renderización, que luego se usa para calcular el diseño de cada elemento visible y funciona como entrada en el proceso de pintura que renderiza los píxeles en la pantalla. Optimizar cada uno de estos pasos es fundamental para lograr un rendimiento de renderización óptimo.
En la sección anterior sobre la construcción del modelo de objetos, construimos los árboles de DOM y CSSOM en función de la entrada de HTML y CSS. Sin embargo, ambos son objetos independientes que capturan diferentes aspectos del documento: uno describe el contenido y el otro describe las reglas de estilo que deben aplicarse al documento. ¿Cómo los combinamos y logramos que el navegador renderice píxeles en la pantalla?
Resumen
- Los árboles de DOM y CSSOM se combinan para formar el árbol de representación.
- El árbol de renderización solo contiene los nodos necesarios para renderizar la página.
- El diseño computa la posición y el tamaño exactos de cada objeto.
- El último paso es la pintura, que toma el árbol de representación final y renderiza los píxeles en la pantalla.
Primero, el navegador combina el DOM y el CSSOM en un “árbol de representación”, que captura todo el contenido visible del DOM en la página y toda la información de estilo del CSSOM para cada nodo.
Para construir el árbol de renderización, el navegador realiza, aproximadamente, lo siguiente:
Comenzando por la raíz del árbol del DOM, recorre cada nodo visible.
- Algunos nodos no son visibles (por ejemplo, etiquetas de secuencias de comandos, metaetiquetas, etc.) y se omiten porque no se reflejan en el resultado renderizado.
- Algunos nodos se ocultan a través de CSS y también se omiten del árbol de representación; por ejemplo, el nodo de intervalo (en el ejemplo anterior) no aparece en el árbol de representación porque hay una regla explícita que establece la propiedad “display: none” en él.
Para cada nodo visible, busca las reglas adecuadas de CSSOM y aplícalas.
Emite nodos visibles con contenido y sus estilos calculados.
El resultado final es un árbol de representación que contiene la información de contenido y estilo de todo el contenido visible en la pantalla. Una vez implementado el árbol de renderización, podemos continuar con la etapa de “diseño”.
Hasta este punto, calculamos qué nodos deberían ser visibles y sus estilos calculados, pero no calculamos su posición y tamaño exactos dentro del viewport del dispositivo: esa es la etapa de “diseño”, también conocida como “reprocesamiento”.
Para determinar el tamaño y la posición exactos de cada objeto en la página, el navegador comienza en la raíz del árbol de representación y lo atraviesa. Consideremos un ejemplo sencillo y práctico:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
El cuerpo de la página anterior contiene dos div anidados: el primer div (principal) establece el tamaño de visualización del nodo en el 50% del ancho de la viewport, y el segundo div (contenido por el superior) establece su ancho en el 50% del elemento superior; es decir, el 25% del ancho de la viewport.
El resultado del proceso de diseño es un “modelo de cuadros”, que captura con precisión la posición y el tamaño exactos de cada elemento en el viewport: todas las mediciones relativas se convierten en píxeles absolutos en la pantalla.
Por último, ahora que sabemos qué nodos son visibles, y sus estilos y geometría calculados, podemos pasar esta información a la etapa final, que convierte cada nodo del árbol de representación en píxeles reales en la pantalla. Este paso se suele denominar "pintura" o "rasterización".
Este proceso puede demorar un poco, ya que el navegador tiene que realizar bastante trabajo. Sin embargo, las Herramientas para desarrolladores de Chrome pueden proporcionar información sobre las tres etapas descritas anteriormente. Examinemos la etapa de diseño para nuestro ejemplo original de "Hello World":
- El evento “Layout” captura la construcción, la posición y el cálculo del tamaño del árbol de representación en el cronograma.
- Cuando se completa el diseño, el navegador emite eventos “Paint Setup” y “Paint”, que convierten el árbol de representación en píxeles en la pantalla.
El tiempo necesario para construir el árbol de representación, el diseño y la pintura varía según el tamaño del documento, los estilos aplicados y el dispositivo en el que se ejecuta: cuanto más grande es el documento, más trabajo tiene el navegador; cuanto más complicados son los estilos, más tiempo lleva pintar también (por ejemplo, un color sólido es "económico" de procesar, mientras que una sombra paralela es "costosa" de procesar y renderizar).
Finalmente, la página es visible en el viewport:
A continuación, se incluye un resumen rápido de los pasos del navegador:
- Procesa el lenguaje de marcado HTML y crea el árbol del DOM.
- Procesar el lenguaje de marcado CSS y crear el árbol del CSSOM
- Combina el DOM y el CSSOM en un árbol de representación.
- Ejecuta el diseño en el árbol de renderización para calcular la geometría de cada nodo.
- Pintar los nodos individuales en la pantalla
Es posible que nuestra página de demostración parezca simple, pero requiere bastante trabajo. Si se modificara el DOM o el CSSOM, tendrías que repetir el proceso para determinar qué píxeles se deberían volver a representar en la pantalla.
La optimización de la ruta de renderización crítica es el proceso de minimizar la cantidad total de tiempo empleado en los pasos 1 a 5 de la secuencia anterior. De esta manera, se renderiza contenido en la pantalla lo más rápido posible y también se reduce el tiempo entre las actualizaciones de la pantalla después de la renderización inicial; es decir, se logran frecuencias de actualización más altas para el contenido interactivo.