Motores de render es uno de los componentes básicos de los navegadores web. Se encarga de interpretar los archivos HTML (lenguaje de marcado de hipertexto), CSS (hojas de estilo en cascada), y Javascript para presentarlos en pantalla, ó convertirlos a pixeles.
El proceso desde la interpretación de html, css y Javascript hasta la conversión a pixeles se puede agrupar en cuatro (4) pasos generales:
- Análisis gramatical, ó parsing, de HTML a DOM (Document Object Model)
- Interpretación del archivo CSS (CSSOM- Cascading Style Sheets Object Model) para cada nodo del DOM.
- Creación un nuevo árbol que incluye el DOM, con estilos y despliegue de nodos.
- Pintar el árbol de render, ó “render tree” (seguiré refiriéndole “render tree”).
Pero, antes de abundar sobre motores de render de un navegador, ¿alguna vez haz participado en, o visto, algún deporte donde los fanáticos de un equipo cantan mientras se observa un visual de las dimensiones de un sector particular del público? Puedes observar un ejemplo en la siguiente imagen.
¿Por qué la pregunta?
Porque voy a explicar cómo motores de render de un navegador funciona similar a un estadio lleno de personas que ilustran un mensaje al cantarle a su equipo favorito.
1. Análisis gramatical: de HTML a DOM
Los navegadores web no interpretan los archivos html tal y cual son generados por programadores. Es por esto que los motores de render se encargan de analizar gramaticalmente, ó “parse” (en inglés), la estructura html a objetos que el navegador puede interpretar.
Los motores de render reciben los archivos de html como un estadio recibe a grupos de fans de un deporte al colocarse en fila. Muchas personas consecutivas pero, el estadio no entiende cómo esas personas se relacionan entre sí, o dónde van a terminar sentados.
Para eso están las personas con rol de ujier. Estas personas pueden interpretar los boletos de las personas en fila y dirigirlos hacia sus respectivos asientos para estructurar el visual que se verá durante el partido.
El análisis gramático toma en cuenta las etiquetas de HTML y la forma en que están anidadas para crear estos objetos y relacionarlos entre sí. Esto incluye el DOM (documento modelo de objetos).
El DOM es un documento que modela la relación que tienen los diferentes objetos, o nodos, que estructuran una página web.
El documento modelo, puede ser manipulado utilizando Javascript. Algunos ejemplos de manipulaciones incluyen añadir nodos o cambiar colores a los nodos.
El proceso de crear estos objetos es complejo, por lo que no entraré en detalle en este artículo. Pero, a este punto, el DOM tiene conocimiento de la estructura de la página web. Aunque todavía no ha interpretado el estilo de la página.
En nuestro ejemplo de fans del deporte, a este punto, los diferentes grupos de personas están sentadas en las gradas del estadio, pero aún no tienen la pancarta de color que mostrarán durante el canto.
2. Construcción del CSSOM
Diez (10) minutos antes de que comience el juego, los ujieres con muchas cartulinas de color en mano, se acercan a cada extremo de las filas del estadio.
Cada cartulina tiene un número de asiento asignado para que el visual haga sentido cuando se vea en su gran tamaño. Así que asumamos que las cartulinas fueron asignadas a un asiento especifico por un cálculos de estilo.
Luego de convertir el HTML para crear el DOM, el motor de render le asigna a los nodos del DOM los estilos descritos en el documento css. Esta asignación son cálculos de estilos de CSS. El cálculo incluye el proceso del pareo de selectores y el proceso de cascada (por esto el nombre hojas de estilo de cascada).
El cálculo de estilos de CSS es digno de un escrito dedicado únicamente a este tema, así que no indagaré en este escrito. Pero, para propósitos de este escrito, es importante saber que en esta etapa, el motor de renderizado le asigna a cada uno de los nodos del DOM estilos como color, font, y bordes.
La asginación de estilos a nodos construye el CSSOM (modelo de objeto de la hoja de estilo de cascada).
A este punto, los motores de render sabe la estructura de los elementos de la página web, y el estilo de cada elemento.
3. Arbol de render
Los ujieres comienzan a repartir cada cartulina, y la energía del público se transforma de conversaciones a emoción por el comienzo del juego.
El proceso de repartir las cartulinas asignadas por asiento es la representación del cálculo del tamaño y posición en pantalla de cada nodo.
La forma cuadrada de la cartulina representa los elementos de la página que se van a observar en pantalla.
Una vez los nodos del DOM tienen los estilos asignados, el motor de renderizado calcula el tamaño de cada nodo, y su posición cuando se vea en pantalla.
El resultado es un árbol de render donde se crean cajas para cada uno de los elementos de la página web.
De momento, se enciende un micrófono y el maestro de ceremonias da la bienvenida. El juego está por comenzar.
4. Pintar el árbol de render
El motor de renderizado es el responsable de pintar en pantalla el nuevo arbol de render.
¿Qué significa pintar en pantalla?
Parte de la memoria de la computadora esta asignada para pixeles. El motor de renderizado va asignando los valores de estilos de los nodos a a estos espacios de memoria. Así los pixeles obtienen su color, forma y posición.
Cuando presentan al equipo local, el público se vuelve loco. Comienzan los cantos de batalla. Cada individuo del público levanta la cartulina sobre su cabeza.
Las cartulinas pintan los asientos del estadio con el color, la forma y posición que se require para que el mensaje al equipo se vea.
“Estamos listos”, lee. La energía es gloriosa.
Recursos
Este artículo fue inspirado por el episodio “Level Up with Javascript (Subiendo de nivel con Javascript)” del podcast Ladybug.
Las sugerencias de las Ladybugs me llevaron a un episodio de otro podcast que me inspiró con las ilustraciones, el episodio del podcast Code Newbie: “How Do Browsers Work?” (¿Cómo funcionan los navegadores?). Donde la programadora y artista Lin Clark explica el funcionamiento de los navegadores, y su trabajo en Mozilla.
Además, Lin Clark escribió otro artículo: “Inside a super fast CSS engine: Quantum CSS (aka Stylo)” (Dentro de un motor CSS Super Rápido: CSS Quantum (aka Stylo)) que detalla el rol de CSS al una página web ser interpretada.
Las explicaciones y dibujos de Lin Clark me ayudaron a entender el motor de render. Ella va más al detalle de lo que yo expliqué en este artículo así que te invito a leer los artículos si quieres indagar en el tema.
¡Gracias por leer!
Puedes obtener notificaciones de nuevos artículos directamente a tu buzón electrónico registrándote en el siguiente enlace.
Artículos relacionados
Los siguientes artículos de CTRL-Y están relacionados a este escrito. ¡Deberías de echarles un vistazo!
- HTML para Principiantes
- HTML: Atributos de etiquetado
- HTML: Anidar etiquetas
- Oficina en cada noctámbula
- Recursos para programadoras de web novatas
- Las partes generales del lenguaje de programación
- Aprende a programar: Bajando el pedestal de programación
- Arquitectura de capas para NodeJS
- Filtrando con GraphQL y Prisma: Que NO hacer
Punto Aparte – Un listado de reproducción para ti
Escribí parte de este artículo escuchando el listado de canciones “Creativity Boost” creada por Mia Astral en Spotify. Este listado fué recomendado por una amiga. Contiene una mezcla de canciones upbeat pero liviana que ayudan a mantener el enfoque.
¡Grata lectura!