El Render Tree (Árbol de Renderización) es el árbol creado por el navegador combinando el árbol del DOM y el árbol del CSSOM.
El propósito de crear este nuevo árbol es precisamente crear un árbol que contenga todos los elementos que se van a visualizar, y por lo tanto renderizar, dentro de una página.
Veamos como se vería el Render Tree en una página simple:
La página
Nada del otro mundo.
Los archivos html y css de la misma son los siguientes:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>The Render Tree</title>
</head>
<body>
<header>
<h1>Mascotas geniales</h1>
<p class="main-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</header>
<section>
<h2>Perros</h2>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada dapibus eros, sollicitudin varius nibh fermentum nec. Nullam purus risus, dictum ac dapibus et</p>
<ul>
<li>
<p>Perro 1</p>
<img src="./img/perro1.webp" alt="Lorem Ipsum">
</li>
<li>
<p>Perro 2</p>
<img src="./img/perro2.webp" alt="Lorem Ipsum">
</li>
<li>
<p>Perro 3</p>
<img src="./img/perro3.webp" alt="Lorem Ipsum">
</li>
</ul>
</section>
</body>
</html>
styles.css
img {
width: auto;
height: 200px;
}
.desc {
display: none;
}*El selector de img es irrelevante para el ejercicio y solo es para que todas las imágenes se mantengan con un tamaño consistente.
Los árboles
Y que el Render Tree depende de los árboles del DOM y CSSOM veamos como serían ambos primero:
Árbol del DOM
El árbol del DOM representa la estructura de los elementos HTML que definimos precisamente en nuestro archivo index.html
*¿No estás familiarizado con el DOM? Aprende que es el DOM en 5 minutos y regresa a esta sección.
Cada nodo en este árbol representa un elemento HTML. Los únicos que pueden no ser tan claros a primera vista son los últimos nodos. Todos los que dicen “Text Node“. Estos nodos representan precisamente un texto y cada uno contiene el texto que se inserto en su nodo padre en el documento HTML.
Por ejemplo:
- El nodo de
h1contiene un nodo de texto que contiene “Mascotas geniales”. - El nodo de
h2contiene un nodo de texto que contiene “Perros”. - Cada nodo
licontiene un nodo de texto que contiene “Perro 1”, “Perro 2” y “Perro 3” respectivamente.
Árbol del CSSOM
El árbol del CSSOM representa la estructura de los elementos del documento HTML que heredan sus estilos a otros.
Hay muchos estilos de CSS que se definen por defecto en el navegador. Así mismo algunos de estos se definen desde el elemento html y por lo tanto pueden llegar a heredarse a los elementos hijos.
El resultado de esto es que en muchas ocasiones el árbol del CSSOM llega a tener mucha similud con el del DOM.
*¿No estás familiarizado con el CSSOM? Aprende que es el CSSOM en 5 minutos y regresa a esta sección.
Como puedes ver las diferencias son sútiles.
En primer lugar no se agrega el nodo del elemento head ni sus hijos. Esto es porque no son elemento visuales y por ende no se les agregan estilos.
En segundo lugar no se encuentran los nodos de texto que están denominados como Text Nodes en el árbol del DOM. Si bien un texto si es un elemento visual, los estilos se aplican a los elementos padre y no al texto como tal.
El Render Tree
Una vez que se tienen los 2 árboles anteriores se puede empezar con el proceso para crear el Render Tree.
Veamos como es este proceso para los primeros 3 nodos:
Nodo html
El análisis comienza desde el elemento raíz, el cuál es el nodo html.
Se busca este nodo en el CSSOM y se revisan los estilos que se le aplicaron. Si el elemento tiene un nodo en el CSSOM y es visible, entonces se copia al Render Tree.
Nodo head
Este es el primer hijo de html
Sin embargo como recordarás head no es un elemento visual y por ende no tiene un nodo en el CSSOM. Esto hace que head sea ignorado y no se agregue al Render Tree.
Nuestro Render Tree se queda igual.
El flujo normal haría que continuarámos examinando al hijo de head, title. Sin embargo dado que el padre no es renderizable se concluye que los hijos tampoco lo son y por ende se termina el análisis de esa rama y se pasa a la rama siguiente.
Nodo body
El segundo hijo de html es body.
Este si es un elemento visible y al igual que su padre si tiene un nodo en el CSSOM. Por lo tanto se agrega al Render Tree.
Resultado Final
Este proceso continua para todos y cada uno de los nodos del DOM.
Al final nuestro Render Tree se ve así
¿Simple no?
¡¡Pero, espera!!
Hay algo que falta en este árbol con respecto al DOM. ¿Ya lo notaste?
Así es, falta uno de los hijos de section; el elemento p.
*Si lo tuviste en cuenta desde el principio… ¡Felicidades! ¡Si estas poniendo atención!
¿Por qué falta ese nodo? Los observadores ya sabrán la razón pero la respuesta esta el código CSS. (No lo puse de a gratis como puedes ver)
Veámoslo de nuevo:
index.html (Parcial)
...
<section>
<h2>Perros</h2>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada dapibus eros, sollicitudin varius nibh fermentum nec. Nullam purus risus, dictum ac dapibus et</p>
<ul>
<li>
<p>Perro 1</p>
<img src="./img/perro1.webp" alt="Lorem Ipsum">
</section>
...
styles.css
img {
width: auto;
height: 200px;
}
.desc {
display: none;
}Como puedes ver le estamos agregando la propiedad display; none al elemento p a través de la clase desc.
Esta propiedad hace que los elementos no se dibujen y no ocupen espacio. Por lo tanto al momento de evaluar los nodos del DOM y del CSSOM si bien si se encuentra el nodo de p en ambos y p si es un elemento visual, la propiedad aplicada hace que no sea renderizable y por ende no se agrega al Render Tree.
*Es importante no confundir display; none con otra propiedad: visibility: hidden.visiblity: hidden hace invisible el elemento, pero sigue respetando el espacio que el elemento ocupa.