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 rendimiento óptimo de la renderizació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 renderizació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, atraviesa cada nodo visible.
- Algunos nodos no son visibles (por ejemplo, las etiquetas de secuencias de comandos, las metaetiquetas, etc.) y se omiten ya que no se reflejan en la salida representada.
- 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.
Para cada nodo visible, encuentra las adecuadas reglas de CSSOM y aplícalas.
Emite nodos visibles con contenido y sus estilos computarizados.
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 cuadro”, que captura con precisión la posición y el tamaño exactos de cada elemento de la ventana de visualización: todas las mediciones 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 se conoce normalmente como “pintura” o “rasterización”.
Esto puede demorar 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 los eventos "Paint Setup" y "Paint", que convierten el árbol de renderización en píxeles en la pantalla.
El tiempo necesario para realizar la construcción del árbol de renderizació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 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 es visible en la ventana de visualización:
A continuación, se describe un resumen de los pasos del navegador:
- Procesa el lenguaje de marcado HTML y compila el árbol del DOM.
- Procesa el lenguaje de marcado CSS y construye el árbol de CSSOM.
- Combina el DOM y el CSSOM en un árbol de renderizació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. Esto permite representar contenido en la pantalla lo más rápido posible y también disminuye la cantidad de tiempo entre actualizaciones de la pantalla tras la representación inicial; es decir, permite alcanzar mayores frecuencias de actualización para el contenido interactivo.