El objetivo de este artículo es explicar de manera sencilla los distintos pasos que siguen los navegadores para terminar pintando el contenido de la página a partir del html, css y Javascript.
Todas páginas web están formadas por html, css y Javascript e independienemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para conseguir tanto el contenido como la manera en que éste se ha de mostrar al usuario:
- 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.
Aunque el navegador sigue ese orden lógico para saber qué y cómo renderizar, voy a explicarlo en un orden distinto que creo que para mi, 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 ésta se presenta, viene dada por el render tree. Éste, no es más que un conjunto de nodos que tienen la información a mostrar y unos estilos atribuidos (sean los que por por defectos cada buscador le atribuye a los elementos o los que nosotros hayamos querido añadirles).
¿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 són lo mismo.
Por otro lado, el CSSOM es el árbol de nodos que indicará al navegador cómo se debe pintar el DOM (el contenido que tenemos para pintar) dadas las distintas reglas que tengamos de CSS.
Por tanto, dependiendo de cuanta información tengamos a pintar y cuantas reglas de CSS tengamos y que tan complejas sean, tomará más o menos tiempo el generar el DOM y el CSSOM Tree y por tanto, más tardará en generarse el Render Tree , con lo que la carga de la página o aplicación web se verá afectada.
¿Cómo se genera el árbol DOM?
El DOM se genera a partir del fichero con extensión .html y sigue distintos pasos para generarse:
- Convertir los bytes a carácteres.
- Pasar de carácteres a tokens.
- Generar los nodos.
- Construir el árbol DOM.
En caso de que el navegador detecte un <script> no declarado como asíncrono en el <head> de la página, la creación del DOM será bloqueada hasta que el Javascript sea descargado y ejecutado. Por eso es importante declarar los scripts como asíncronos.
¿Cómo se genera el árbol CSSOM?
El CSSOM se genera a partir del fichero con extensión .css y sigue exactamente los mismos pasos que el DOM para generarse:
- Convertir los bytes a carácteres.
- Pasar de carácteres 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 el proceso de generar el CSSOM no es bloqueante para poder generar el DOM pero tengo malas notícias, si que lo es para renderizarlo.
En caso de que el navegador detecte un <script> no declarado como asíncrono en el <head> de la página, éste será descargado pero no ejecutado hasta que el árbol CSSOM termine de ser construido y por tanto, si el Javascript no es ejecutado, la construcción del DOM queda bloqueada.
Calcular el layout o disposición de los nodos
La fase o paso de cálculo de la disposición de los nodos sirve para calcular que geometría tendrá cada uno de los nodos como también para saber su distribución en la pantalla respecto al orígen.
Pintar
En esta fase el navegador convierte al árbol de representación o Render Tree en píxeles en la pantalla.
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 éste es combinado con una propiedad border, ésta, haría que tardase 1.5 segundos en vez de 1 segundo.
Para terminar, en caso de que quieras aprender más al respecto, te recomiendo leer el artículo 🇬🇧 que me ha motivadoa explicar brevemente como funciona el renderizado en nuestros navegadores. Éste explica de manera extensa cada uno de los pasos que yo he explicado brevemente.
Namasté 🙏,