¿Qué es Render Tree?🌳

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

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.🔮

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 💚