¿Qué es el motor de renderizado?

 

Recientemente, estaba escuchando el episodio “Level Up with Javascript (Subiendo de nivel con Javascript)” del podcast Ladybug donde una de las locutoras, resumió cómo funciona el navegador web. Ella lo describió tan bien y directo al grano que me dió curiosidad en buscar un poco más sobre el tema.

Las Ladybugs sugirieron algunos recursos, y por ahí seguí sus recomendaciones. Y wow, realmente no había apreciado los procesos que ocurren entre darle “Guardar” a mi código front-end y observar los elementos en pantalla.

El motor de renderizado 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:

  1. Análizis gramatical, ó parsing, de HTML a DOM (Document Object Model)
  2. Interpretación del archivo CSS (CSSOM- Cascading Style Sheets Object Model) para cada nodo del DOM.
  3. Creación un nuevo árbol que incluye el DOM, con estilos y despliegue de nodos.
  4. Pintar el árbol de render, ó “render tree” (seguiré refiriéndole “render tree”).

Pero, antes de abundar sobre el motor de renderizado 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.

Crédito: Escena de video de Youtube grabado por el usuario barcelona.jp

¿Porque la pregunta?

Porque voy a explicar cómo el motor de renderizado de un navegador funciona similar a un estadio lleno de personas que ilustran un mensaje al cantarle a su equipo favorito.

Nota aclaratoria: Utilizar un evento deportivo como ejemplo limita a explicar estos procesos detalladamente. Así que, explicaré los detalles de ciertos procesos en artículos aparte. Eso me ayuda a mantener este artículo más corto, y así no te canso de leerme.

Análisis gramatical: de HTML a DOM

Los navegadores web no interpretan los archivos html tal y cual son generados por programadorxs. Es por esto que el motor de renderizado se encarga de analizar gramaticalmente, ó “parse” (en inglés), la estructura html a objetos que el navegador puede interpretar.

El motor de renderizado recibe 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 lxs ujieres. Ellxs 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.

Construcción del CSSOM

Diez (10) minutos antes de que comience el juego, lxs 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 renderizado 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, el motor de renderizado sabe la estructura de los elementos de la página web, y el estilo de cada elemento.

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.

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.

Crédito: Escena de video de Youtube grabado por el usuario barcelona.jp

Recursos

Como mencioné al principio de este escrito, este artículo fue inspirado por el episodio: “Level Up with 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 renderizado. 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.

Punto Aparte

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.

Leave a Reply

Your email address will not be published. Required fields are marked *