Render Tree

Render Tree

Una vez que tengamos todo el CSSOM y DOM ya cargados, se genera el Render Tree con los únicos nodos visibles relacionados. Es una unión de los dos pasos anteriores que relaciona la estructura de HTML con los estilos de CSS.
.

Pa los curiosos como yo que queran checar el codigo fuente del motor de chome y la documentacion del mismo aqui esta una explicacion corta:
https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/
Explicacion larga:
https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg/edit?pli=1

Clase 29 - Render Tree

Repaso de la clase

¿Qué es y qué hace el Render Tree?

• Es el tercer paso que realiza un navegador para mostrar un sitio web en pantalla. En este paso el navegador toma el árbol de nodos DOM y el de CSSOM, luego los junta para tener otro árbol de nodos que le permite saber al navegador que estilos CSS van asignados a los elementos HTML, además de entender la jerarquía de estilos CSS.

¿Para qué sirve la jerarquía de CSS?

• Esto lo usa el navegador para pasar estilos que tengan elementos HTML padres a elementos HTML hijos.

Es importante tomar en cuenta algunas diferencias entre el DOM, CSSOM y el arbol de renderizado:
El árbol de renderizado parece ser una réplica del DOM, pero el árbol de representación no incluye los nodos que forman parte del DOM que no sean visibles, por ejemplo el elemento head y sus elementos contenidos.
.
El árbol de renderizado también omite nodos del CSSOM como aquellos nodos que tengan la propiedad display:none.
.
Ahora una breve aclaracion: tenga en cuenta que visibility: hidden es diferente de display: none. El primero hace que el elemento sea invisible, pero el elemento sigue ocupando espacio en el diseño (es decir, se representa como un cuadro vacío), mientras que el último ( ) display: none elimina el elemento por completo del árbol de representación, de modo que el elemento es invisible y no es parte del diseño.
.
El árbol de renderizado puede poseer algunos nodos que no estan incluidos en el DOM, por ejemplo con los psudo-elementos css, es posible agregar contenido, estos seran nuevos nodos en el árbol de renderizado.
Fuentes:
Link:
https://cabulous.medium.com/how-does-browser-work-in-2019-part-iii-rendering-phase-i-850c8935958f
.
Link:
https://medium.com/weekly-webtips/understand-dom-cssom-render-tree-layout-and-painting-9f002f43d1aa
.
Link:
https://web.dev/critical-rendering-path-constructing-the-object-model/
.
Link:
https://engineering.teknasyon.com/what-is-the-dom-how-does-html-rendering-happen-in-browsers-cbeb12bdfea6

Es interesante saber que render tree es la combinacion de DOM y CSSOM el cual nos permite crear una estructura especifica de FrontEnd.