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.
.
Historia de las computadoras
¿Cómo desarrollar para la web?
El lenguaje de la computadora
Historia de la computación
¿Quiénes eran las computadoras?
Inputs y Outputs
Binario
Bits y Bytes
ASCII
UNICODE
RGB
Cómo funciona el internet
¿De donde viene el internet?
Internet internacional
Protocolos
Paso a paso de cómo funciona los protocolos
ISP
DNS
Historia de la Web
El primer desarrollador Web
Web Browser
W3C
Evolución del protocolo HTTP
HTTPS
Estandarés Web: navegadores
Estandarés Web: HTML, CSS y Javascript
Web Assembly
La Web moderna: ¿dónde estamos ahora?
La web moderna: internet of things, machine learning e inteligencia artificial
Cómo funciona el navegador
¿Cómo funciona el navegador?
DOM
CSSOM
Render Tree
Layout
Paint
JS Engine
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 6
Preguntas 1
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
¿Qué es y qué hace el Render Tree?
¿Para qué sirve la jerarquía de CSS?
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.