No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Recursos

Aportes 6

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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.