Introducción
Si eres el tipo de persona que se mantiene al día con aspectos como cómo funcionan los navegadores, ya sabes que, últimamente, han habido algunos artículos increíbles en los que se detalla la operación acelerada de procesador/compuesto por GPU de Chrome. En primer lugar, Procesamiento acelerado en Chrome: el modelo de capas es una excelente introducción sobre cómo Chrome usa el concepto de capas para dibujar la página. Para obtener más información, composición acelerada por GPU en Chrome analiza cómo Chrome usa estas capas junto con la GPU para renderizar tu página.
La cuestión filosófica
Después de dedicar mucho tiempo a la escritura de rasterizadores de software para propósitos 3D, me di cuenta de que algunas propiedades de CSS deberían tener un rendimiento variado al dibujar una página. Por ejemplo, rasterizar una imagen pequeña en la pantalla es una operación algorítmica completamente diferente en la que se dibuja una sombra paralela sobre una forma arbitraria. Entonces, la pregunta fue la siguiente: ¿Cómo afectan las distintas propiedades de CSS al peso de renderización de tu página?
Mi objetivo era categorizar un conjunto grande de propiedades o valores de CSS según los tiempos de procesamiento, de modo que podamos comprender qué tipos de propiedades de CSS tienen mejor rendimiento que otras. Para ello, escribí una automatización con cinta adhesiva y goma de mascar para intentar agregar visibilidad numérica a los tiempos de pintura de CSS, lo que funcionó de la siguiente manera:
- Genera un conjunto de páginas HTML individuales, cada una con un solo elemento DOM y alguna permutación de propiedades de CSS adjunta.
- Ejecuta alguna secuencia de comandos de automatización que, en cada página, hará lo siguiente:
- Iniciar Chrome
- Cómo cargar una página
- Produce una foto de Skya para la página.
- Ejecuta cada foto de Skia tomada con Skia Benchmark para obtener los tiempos.
- Arroja todos los tiempos y maravíllate con los números. (Esta parte es importante...)
Con esta configuración, generamos un conjunto de páginas HTML, en el que cada página contiene una permutación única de propiedades y valores de CSS; por ejemplo, este es dos archivos html:
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Y otro, que es más complejo
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
A continuación, como una variante del último ejemplo, donde solo cambiamos el valor del gradiente radial:
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
Luego, cada página se carga en una instancia nueva de Chrome (para garantizar que los tiempos no estén sesgados por ningún estado inactivo en las recargas de las páginas) y se toma una Skia Picture (*.SKP) para evaluar qué comandos de Skia se utilizan para pintar la página. Una vez que se generan los archivos SKP para cada archivo HTML, ejecutamos otro lote para enviar los archivos *.SKP a través de la aplicación Skia Benchmark (compilada a partir del código fuente de Skya), que vuelca el tiempo promedio necesario para procesar esa página.
Evaluar los datos
A partir de esto, tenemos una capacidad aproximada de representar cuánto se necesita para pintar un conjunto de propiedades de CSS. O podemos comenzar a clasificar las propiedades de CSS según su rendimiento de pintura. Aquí presentamos un gran gráfico tomado con la versión beta de Chrome 27, en el que se muestra todo el conjunto completo de datos de tiempo de este proceso. Ten en cuenta que todos los datos están sujetos a cambios a medida que Chrome se vuelve más rápido con el tiempo.
Cada barra vertical representa el tiempo de procesamiento de imagen de una página con una sola combinación de propiedades de CSS (ampliada por 100 veces; el valor en escala real de este gráfico es de 0,1.56 ms). Muchas líneas bonitas, pero de esta forma es un poco inútil: necesitamos hacer una extracción de datos para encontrar tendencias útiles.
En primer lugar, encontramos pruebas de que algunas propiedades de CSS son más costosas de renderizar que otras. Por ejemplo, dibujar una sombra paralela en un elemento del DOM implica una operación de varios pases con splines y otros tipos de elementos desagradables, en comparación con la opacidad, que debería ser más fácil de representar.
En segundo lugar, y lo más interesante es que las combinaciones de propiedades de CSS pueden tener un tiempo de procesamiento de imagen mayor que la suma de sus partes. Desde la perspectiva de un observador, esto es un poco extraño, se espera que A+B = C, no 2.2C. Por ejemplo, agregando box-shadow y border-radius-stroke :
Lo más interesante de esto es que no se trata solo de la propiedad box-shadow, sino esa permutación de valor específico. Por ejemplo, a continuación, se muestra una agrupación de box-shadow : 50% y border-radius con variaciones de valor.
Si observamos los datos, esto sucede durante un tiempo. Hay muchas combinaciones extrañas, y mi paquete de pruebas apenas las toca a todas; todavía quedan muchísimas pruebas y combinaciones que podrían generar resultados interesantes.
Cómo encontrar el peso de renderización de tu página
Ahora que cuentan con la capacidad de hacer un seguimiento de los tiempos de renderización de cada elemento de tu página, los desarrolladores pueden comenzar a evaluar el peso del procesamiento de la página y cómo afecta la capacidad de respuesta de tu sitio. A continuación, se incluyen algunas sugerencias para comenzar.
- Usa el modo de pintura continua de Chrome en las Herramientas para desarrolladores de Chrome para comprender los costos de las propiedades de CSS.
- Incorpora las revisiones de CSS al proceso de revisión de código existente para detectar problemas de rendimiento Busca lugares en tu CSS en los que uses elementos que se sabe que son más costosos, como gradientes y sombras. Pregúntate, ¿realmente necesito esto aquí?
- Si tienes dudas, siempre es preferible que obtengas un mejor rendimiento. Es posible que los usuarios no recuerden cuál es el ancho del padding en tus columnas, pero recordarán cómo se siente al visitar tu sitio.
Consideraciones finales
Uno de los aspectos más interesantes de este experimento es que los tiempos seguirán cambiando con cada versión de Chrome (con suerte, será más rápida;) el software del navegador es un área de superficie que cambia constantemente. Lo que hoy es lento, podría ser rápido mañana. Puedes aprovechar este artículo para evitar colocar box-shadow: 1px 2px 3px 4px en un elemento que ya tiene border-radius:5. Sin embargo, la conclusión más valiosa debería ser que las propiedades del CSS afectan directamente los tiempos de procesamiento de imagen de tu página.