14

¿Qué es Render Tree?🌳

Es un árbol que une el DOM🧩 y CSSOM🔮 para renderizarlos, creando un código que pueda interpretar el navegador.

<h3>Proceso de renderizado</h3>

1. Bytes: El navegador coge todo el código y lo transforma en bytes.
.
📌Dato: El byte es la mínima unidad(1 o 0) dentro del lenguaje máquina.
.
2. Characters: El navegador transforma estos bytes en caracteres dependiendo de la codificación que le hemos pasado. Por ejemplo UTF-8.🧠
Para interpretar nuestra escritura en símbolos.

3. Tokens: Ahora transforma dichos caracteres en tokens, identificando el significado de los caracteres relacionándolo a etiquetas que generan cierto tipo de contenido. W3C documenta todas la etiquetas.🎐
Interpretación de marcado dentro de HTML.

4. Nodes: Después de saber el dicho orden de los tokens hará una transformación a los nodos, estos nodos son objetos. Dichos objetos son lo que el navegador sabe interpretar (Los elementos). 🎫

5. DOM: Ya cuando el navegador tiene todos los nodos los ordena en un árbol jerárquico donde cada objeto tendrá una posición dependiendo su etiqueta.🧩

6. CSSROM: Transforma el CSS y une con el DOM. Asignando los estilos a cada elemento dentro del DOM.🔮

<h3>En resumen:</h3>
  1. Procesa el HTML y construye el DOM.
  2. Procesa CSS y construye el CSSROM.
  3. DOM + CSSOM = Render Tree.
  4. Ejecuta el diseño en el Render Tree.
  5. Pinta el Render Tree en la pantalla.

Ahora ya sabes qué es y cómo funciona el proceso renderizado de la web. 🤗🚀
Comencemos a programar.👨‍💻👩‍💻
#NuncaParesDeAprender 💚

Escribe tu comentario
+ 2
1
14824Puntos

Una consulta, el “Abstract Syntax Tree” es el “Render Tree”?

2
10 meses

No, el Render Tree es el arbol que genera el browser para mostrar la pagina y se basa en HTML y CSS. En cambio el Abstrarct Syntax Tree es el arbol que se genera para analizar codigo de forma estatica (sin que este corriendo) y es usado por herramientas como el ESLint, sirve para el momento del desarrollo pero no para la ejecucion.