Renderizado del navegador: del texto a las imágenes

Sin embargo, mis pensamientos cambiaron cuando experimenté en la práctica la animación entrecortada o las sacudidas de la pantalla al desplazarme (jank). «¿Por qué el mismo código se ejecuta sin problemas en Chrome pero falla en Internet Explorer (IE)?» “¿Por qué mi CPU se dispara cuando cambio un poco el estilo con JavaScript?”

Resulta que el navegador no es sólo un marco de imagen. El navegador era un enorme ‘pintor’ y ‘arquitecto’ que interpretaba el texto (HTML/CSS) que enviamos, calculaba matemáticamente cada píxel y lo imprimió.

La última vez, entregamos datos de forma segura a través de caminos de red en mal estado. Esta vez, abramos el cuadro de datos (paquete) que llegó y descubramos cómo el navegador dibuja una imagen llamada pantalla. Esta es la última historia de la serie Re: Conceptos básicos de arranque de CS.

Llegó la carga, comienza el montaje

En nuestra visión del mundo de “centro logístico digital”, el producto (archivo HTML) ya ha llegado a casa del cliente (navegador). Sin embargo, lo que llegó no fue un producto terminado, sino un “manual de montaje”. El equipo de trabajo llamado motor de navegador (motor de renderizado) lee este manual e inmediatamente comienza el montaje. Este proceso se llama proceso de renderizado.

Paso 1: Análisis del plano (análisis y árbol DOM)

Lee el texto HTML que llega primero y crea un ‘esqueleto’.

• <html> es la raíz (Root), <body> el tronco, <div> las ramas…
• Esta estructura en forma de árbol (Tree) se llama DOM (Document Object Model). Es también la API que permite a JavaScript manipular más adelante este esqueleto.

Paso 2: Diseño de interiores (árbol CSSOM)

Luego, lee el archivo CSS y crea ‘reglas de estilo’.

• «Todos los div en rojo», «los elementos con la clase box, de tamaño 100px»
• Esto se llama CSSOM (CSS Object Model).

Paso 3: Crear una orden de trabajo (árbol de renderizado)

Ahora combinamos el esqueleto (DOM) y el diseño (CSSOM). El punto importante aquí es que sólo se seleccionan «las cosas que realmente aparecerán en la pantalla».

• ¿Y un elemento con la propiedad display: none? Como no se va a ver en pantalla, queda excluido del árbol de renderizado. (Tampoco ocupa espacio)
• ¿Y visibility: hidden, en cambio? No se ve, pero sí ocupa espacio, así que se incluye en el árbol de renderizado.

[Verificación de código] Reflujo y repintado

Ahora es el paso realmente importante. La clave para la optimización del rendimiento radica aquí. Una vez creado el árbol de renderizado, el navegador realiza dos tareas pesadas.

1. Diseño (Layout) / Reflujo (Reflow): calcula matemáticamente ‘dónde y con qué tamaño’ se colocará cada elemento. (Proyecto arquitectónico)
2. Pintura (Paint) / Repintado (Repaint): en las posiciones calculadas, ‘aplica el color’ de verdad. (Trabajo de pintura)

Sentimos la diferencia de costo con el código.

const box = document.getElementById('box');

// Case 1: Codigo que provoca layout (Reflow) (caro)
// Si cambia el tamano o posicion, hay que recalcular los elementos cercanos.
box.style.width = '200px'; 
box.style.height = '200px';
box.style.margin = '20px';

// Case 2: Codigo que solo provoca paint (Repaint) (relativamente barato)
// Posicion igual, solo cambia el color. Sin recalculo, solo repintado.
box.style.backgroundColor = 'blue';
box.style.color = 'white';
box.style.visibility = 'hidden';

Análisis:

• Cambiar width: es una obra que modifica el tamaño del edificio. El edificio de al lado se desplaza, y el siguiente también. El navegador tiene que volver a hacer todos los cálculos desde cero. (Se produce un Reflow -> el principal culpable de la caída del rendimiento)
• Cambiar color: el tamaño del edificio se queda igual y solo se vuelve a pintar. No hace falta calcular nada. (Se produce un Repaint -> rápido)

En la práctica, la mayoría de los casos de «animación entrecortada» se producen porque las propiedades de diseño como ancho, left y top se tocan en tiempo real. En este caso, se necesita una técnica para omitir el cálculo del diseño mediante el uso de propiedades como transform.

Consejos prácticos: no maltrates a tu navegador

No sabía esto cuando estaba en la universidad, así que manipulé aleatoriamente el DOM con JavaScript. Al revisar la declaración for, cambié el tamaño y el estilo de cada elemento. Desde la perspectiva del navegador, es como ser torturado destruyendo y reconstruyendo un edificio docenas de veces por segundo.

Consejos para garantizar el rendimiento:

1. Agrupa las manipulaciones del DOM y hazlas de una vez: no cambies los estilos uno por uno; prepara una class de antemano y cambia solo className, una única vez.
2. Deja las animaciones a la GPU: si en lugar de left y top usas transform: translate(), se omite la etapa de diseño y la GPU se encarga del trabajo.
3. La diferencia al ocultar: distingue bien entre display: none (excluido del árbol de renderizado), si quieres eliminar el elemento por completo, y visibility: hidden (incluido en el árbol de renderizado), si solo quieres dejar su hueco vacío.

Cerrando la serie 1: mi CS reiniciado

Con este artículo, la serie [Re: Arranque] Conceptos básicos de CS ha llegado a su fin.

Hicimos un largo viaje juntos.

1. Lenguaje (Language): el código escrito por personas se traduce a lenguaje máquina (build),
2. Memoria (Memory): se instala en las habitaciones llamadas Stack y Heap,
3. Proceso (OS): se reparte la CPU con la técnica de clonación llamada hilos,
4. Red (Network): viaja dividido en paquetes por caminos en mal estado y,
5. Renderizado (Rendering): al encontrarse con el pintor llamado navegador, por fin apareció ante nuestros ojos.

Al principio, era sólo conocimiento que memorizaba para conseguir un trabajo. Sin embargo, después de encontrar errores en la práctica y volver a mirar, CS (ingeniería informática) no era letra muerta, sino una tierra sólida que respaldaba mi código.

El trabajo de cimentación ya está completo. Es hora de construir tu propio castillo sobre tierra firme. En la próxima serie [Monolith Builder], cubriré la creación de aplicaciones web utilizando Spring Boot y Vue.js, que he experimentado en la práctica. Esperen con ansias el proceso de convertir la «teoría» en «práctica».