Te has parado alguna vez cual es el proceso que siguen los navegadores para pintar el contenido? Pues yo hoy te lo voy a explicar!
Todas páginas web están formadas por html, css y Javascript. Independientemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para mostrar el contenido que el usuario termina consumiendo. El proceso es el siguiente:
- Generar el árbol DOM a partir del html.
- Generar el CSSOM Tree a partir del css.
- Generar el Render Tree con la combinación del DOM y CSSOM
- Calcular la disposición o layout de todos los nodos.
- Pintar los nodos del Render Tree.
En el siguiente gráfico puedes ver visualmente las distintas fases mencionadas.
Para saber qué y cómo renderizar los distintos elementos, el orden lógico es el mencionado, pero yo voy a explicarlo en un orden distinto que creo que, para mí, es más natural.
¿Cómo sabe el navegador qué pintar?
Toda la información que el usuario ve a través de su pantalla y la manera en que esta se presenta (colores, posicions, etc.), viene dada por el render tree.
El Render Tree es un conjunto de nodos que tienen la información a mostrar y unos estilos atribuidos, que por defecto son los del navegador, además de los que nosotros hayamos añadido.
¿Cómo se genera el render tree?
El render tree es la combinación de dos árboles de nodos llamados DOM y CSSOM.
El DOM es el árbol de nodos que representa los contenidos de la página o aplicación web. Estos contenidos están determinados por el HTML y, aunque se parezca bastante al DOM, no son lo mismo.
Por otro lado, el CSSOM es el árbol de nodos que indicará al navegador cómo se debe pintar el DOM mediante las distintas reglas que tengamos de CSS.
Por tanto, el tiempo de carga de nuestra página se ve directamente afectado por la cantidad de información que queramos mostrar y de la cantidad y complejidad de nuestras reglas de CSS.
¿Por qué? Pues porque se tomará más tiempo en generar el DOM Tree y el CSSOM Tree. Estos son dos procesos que bloquean la construcción del Render Tree, y este es el necesario para pintar el contenido de la página.
¿Cómo se genera el árbol DOM?
El DOM se genera a partir del fichero con extensión .html y se genera de la siguiente manera gracias al parseador de html:
- Convertir los bytes a caracteres.
- Pasar de caracteres a tokens.
- Generar los nodos.
- Construir el árbol DOM.
Es importante declarar los scripts como asíncrono en el head de la página porque en caso no hacerlo, la creación del DOM será bloqueada hasta que el Javascript sea descargado, parseado y ejecutado.
¿Cómo se genera el árbol CSSOM?
El CSSOM se genera a partir del fichero con extensión .css y el navegador sigue exactamente los mismos pasos que para generar el DOM Tree:
- Convertir los bytes a caracteres.
- Pasar de caracteres a tokens.
- Generar los nodos.
- Construir el árbol CSSOM.
La construcción del DOM y del CSSOM se hacen de manera asíncrona/paralela. Eso significa, que la generación del CSSOM no es bloqueante para poder generar el DOM, pero no hay que olvidar que si es bloqueante para generar el Render Tree, que es el árbol de nodos necesario para empezar a pintar el contenido. Así pues, cuanto menos tarde en generar el DOM y CSSOM, mejor.
Muchas son las acciones que se pueden tomar para reducir el tiempo que tarda el navegador en generar el DOM o CSSOM:
- Evitar cargar contenido que no sea relevante para esa página
- Evitar usar nodos innecesarios
- Usar
y/o::before
para contenido visual::after - Simplificar los selectores de CSS
¿Cómo se genera el Render Tree?
Una vez los árboles de nodos DOM y CSSOM ya han sido construidos, se combinan para generar el Render Tree.
El Render Tree es el árbol de nodos que se usa para calcular la disposición de los nodos visibles, que son los que se terminan pintando en el navegador.
La construcción del Render Tree comienza con la raíz del árbol DOM, atravesando cada nodo visible. Las etiquetas invisibles como
headscriptdisplay: none;visibility: hidden;Calcular el layout o disposición de los nodos
Una vez generado el Render Tree, la fase Layout entra en accion para calcular la dimension y posicion exacta de cada uno de los nodos.
Tomando el tamaño del viewport, el diseño generalmente comienza con el
bodybodyLa primera vez que se determina el tamaño y la posición de los nodos se denomina layout. Los recálculos posteriores del tamaño y las ubicaciones de los nodos se denominan
reflowPintar
En esta fase el navegador convierte al árbol de representación o Render Tree en píxeles en la pantalla. El primer pintado se denomina first meaningful paint.
Pintar implica dibujar cada parte visual de un elemento en la pantalla, incluido el texto, los colores, los bordes, las sombras y los elementos reemplazados, como botones e imágenes.
Es curioso saber que las distintas propiedades de CSS cuestan más o menos de pintar dependiendo de como estén combinadas.
Supongamos el hipotético caso que se tardara 1 segundo en pintar un box-shadow. Si este es combinado con una propiedad border, esta, haría que tardase 1.5 segundos en vez de 1 segundo.
Si quieres aprender más al respecto, te recomiendo leer el artículo que me ha motivado a explicar brevemente como funciona el renderizado en nuestros navegadores. Éste explica de manera extensa cada uno de los pasos que yo he explicado brevemente.
