Fecha de publicación: 31 de marzo de 2014
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 sirve como entrada para el proceso de pintura que muestra los píxeles en la pantalla. Optimizar cada uno de estos pasos es fundamental para lograr un óptimo rendimiento de representación.
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 lenguaje de marcado HTML y CSS. Sin embargo, ambos son objetos independientes que capturan diferentes aspectos del documento: uno describe el contenido y el otro las reglas de estilo que se deben aplicar al documento. ¿Cómo podemos fusionar los dos y lograr que el navegador muestre píxeles en la pantalla?
Resumen
- Los árboles DOM y CSSOM se combinan para formar el árbol de renderizació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 recibe el árbol de renderización final y representa 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 algo parecido a 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 con CSS y también se omiten del árbol de renderización. Por ejemplo, el nodo span (en el ejemplo anterior) no aparece en el árbol de renderización porque tenemos una regla explícita que establece la propiedad “display: none” en él.
Busca las reglas de CSSOM coincidentes y aplícalas para cada nodo visible.
Emite nodos visibles con contenido y sus estilos calculados.
El resultado final es un árbol de renderización que contiene información de contenido y estilo de todo el contenido visible en la pantalla. Con el árbol de renderización en su lugar, podemos continuar con la etapa de “diseño”.
Hasta este punto, calculamos los nodos que deben ser visibles y sus estilos computados, pero no calculamos su posición ni su tamaño exactos dentro de la vista del puerto del dispositivo; esa es la etapa de “diseño”, también conocida como “reflujo”.
Para conocer la posición y el tamaño exactos de cada objeto de la página, el navegador comienza su camino por la raíz del árbol de renderización. Considera el siguiente ejemplo:
<!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 <body> del ejemplo anterior contiene dos <div> anidados: el primer <div> (superior) establece el tamaño de visualización del nodo en 50% del ancho de la ventana de visualización, y el segundo <div> (contenido en el superior) establece su width en 50% de su superior, es decir, el 25% del ancho de la ventana de visualización.
El resultado del proceso de diseño es un "modelo de caja", que captura con precisión la posición y el tamaño exactos de cada elemento en el viewport: todas las medidas relativas se convierten en píxeles absolutos en la pantalla.
Por último, ahora que conocemos los nodos visibles, y su geografía y sus estilos computarizados, podemos pasar esta información a la etapa final, que convierte cada nodo del árbol de renderización en píxeles reales en pantalla. Este paso suele denominarse "pintura" o "rasterizando".
Este proceso puede demorar un poco porque el navegador tiene que realizar bastante trabajo. Sin embargo, Chrome DevTools puede proporcionar información sobre las tres etapas descritas anteriormente. Examina la etapa de diseño de nuestro ejemplo original de “Hello World”:
- El evento "Layout" captura la construcción, la posición y el cálculo de tamaño del árbol de renderización en la línea de tiempo.
- Cuando se completa el diseño, el navegador emite la opción "Paint Setup" (Configuración de pintura). y "Pintura" eventos, que convierten el árbol de renderización en píxeles en la pantalla.
El tiempo necesario para realizar la construcción, el diseño y la pintura del árbol de renderización varía según el tamaño del documento, los estilos aplicados y el dispositivo en el que se ejecuta: cuanto más grande sea el documento, más trabajo tendrá el navegador; cuanto más complicados sean los estilos, más tiempo se tardará en pintar (por ejemplo, un color sólido es “económico” para pintar, mientras que una sombra es “costosa” para calcular y renderizar).
Finalmente, la página se puede ver en el viewport:
A continuación, se incluye un breve resumen de los pasos del navegador:
- Procesa el lenguaje de marcado HTML y crea el árbol del DOM.
- Procesar el lenguaje de marcado de CSS y compilar 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.
- Pinta los nodos individuales en la pantalla.
La página de demostración puede parecer básica, pero requiere bastante trabajo por parte del navegador. Si el DOM o el CSSOM se modifican, deberás repetir el proceso para conocer los píxeles que se deben representar nuevamente en la pantalla.
La optimización de la ruta de acceso de representació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 la cantidad de tiempo entre actualizaciones de pantalla tras la renderización inicial. es decir, lograr mayores frecuencias de actualización para el contenido interactivo.