Optimización del Renderizado Web: Layout, Paint y Composite

En esta articlase, hablaremos de todo el trabajo de renderizado de la web. Que sería básicamente unos procesos, como lo vemos a continuación:

🐱‍🏍 JavaScript 🐱‍🏍Style 🐱‍🏍 Layout 🐱‍🏍 Paint 🐱‍🏍 Composite

El día de hoy, hablaremos de estas últimas tres, estos son los procesos que tienen que hacer algunas de nuestras propiedades para poder renderizarse en la web 💻. Sucede en cuestión de milisegundos.

• Composite: Ordena las partes de la página. Propiedades como opacity y transform.
• Paint: Rellena píxeles. Implica colores, imágenes, textos, sombras, etc.
• Layout: Diseño de la página. Ancho, margin, padding, border, etc.

Si nos dirigimos a csstriggers.com{target="_blank"}, podremos ver todas las propiedades de CSS que utilizamos y cómo actúan en los diferentes navegadores y motores. A continuación veremos una vista previa 👇.

Resumen de la articlase 🎯

Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas “capas” de renderizado hasta que se pinten en la pantalla.

En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempeño de la pagina web ⌛.

Contribución creada con los aportes de: Joseph Darwin Carhuaz Villagomez, Irving Juárez y Angel David Osorio Leyva.