Cómo escribir mejor CSS con rendimiento en mente

En la publicación de hoy reflexionaremos sobre las elecciones de código que podemos hacer en CSS para mejorar el rendimiento del sitio. Pero, antes de sumergirnos en esas opciones, primero echemos un vistazo breve y detallado al flujo de trabajo de representación de la página web para centrarnos en elÁreas problemáticas (en cuanto al rendimiento) que se pueden resolver a través de CSS.

Aquí está el flujo aproximado de operaciones realizadas por el navegador después de la creación del árbol DOM:

Recalcular el estilo (y renderizar la creación del árbol). El navegador calcula los estilos que se aplicarán a los elementos en el árbol DOM. Más tarde, se crea un árbol de procesamiento al descartar los nodos (elementos) del árbol DOM que no se van a representar (elementos con pantalla: ninguna) y aquellos que son (pseudo-elementos).
Diseño (también conocido como reflujo). Usando el estilo computado de antes, el navegador calcula la posición y la geometría de cada elemento en la página.
Repintar. Una vez que se asigna el diseño, los píxeles se dibujan en la pantalla.
Capas compuestas. Durante el repintado, la pintura puede hacerse en diferentes capas de forma autónoma; esas capas son finalmente combinadas juntas.

Ahora continuemos con lo que podemos hacer en las primeras tres etapas de la operación para escribir códigos CSS de mejor rendimiento.

1. Reducir los cálculos de estilo

Como se mencionó anteriormente, en la etapa "Recalcular estilo" el navegador calcula los estilos que se aplicarán a los elementos. Para hacer esto, el navegador primero descubre todos los selectores en el CSS que apuntan a un nodo de elemento dado en el árbol DOM. Luego pasa por todas las reglas de estilo en esos selectores y decide cuáles se aplicarán realmente al elemento..

Para evitar costosos cálculos de estilo., Reducir selectores complejos y profundamente anidados. de modo que es más fácil para el navegador averiguar a qué elemento se refiere un selector. Esto reduce el tiempo computacional..

Otras formas de empleo incluyen reduciendo el número de reglas de estilo (donde sea posible), Eliminar CSS no utilizado y evitando redundancia y anulaciones, para que el navegador no tenga que pasar por el mismo estilo una y otra vez durante los cálculos de estilo.

2. Reducir los reflujos

Los cambios de flujo o diseño en un elemento son procesos muy "costosos", y pueden ser un problema aún mayor cuando el elemento que pasó por los cambios de diseño tiene una cantidad significativa de niños (ya que Los reflujos caen en cascada por la jerarquía).

Los reflujos se activan por cambios de diseño en un elemento, como cambios en las propiedades geométricas como la altura o el tamaño de fuente, la adición o eliminación de clases a elementos, cambio de tamaño de la ventana, activado :flotar, Cambios de DOM por JavaScript, etc..

Al igual que en el cálculo de estilo, para reducir los reflujos., evitar selectores complejos y arboles DOM profundos (de nuevo, esto es para evitar el exceso de cascada de Reflows).

Si tiene que cambiar los estilos de diseño de un componente en su página, apunte a los estilos del elemento que se encuentra en el nivel más bajo en la jerarquía de elementos que el componente está hecho de. Esto es para que los cambios de diseño no activen (casi) ningún otro Reflujo..

Si estás animando un elemento que pasa por cambios de diseño., sácalo del flujo de páginas por posicionándolo completamente, ya que Reflow en elementos absolutamente posicionados no afectará al resto de los elementos en la página.

Resumir:

Elementos de destino que están más abajo en el árbol DOM al realizar cambios de diseño
Elija elementos posicionados absolutamente para el cambio de animaciones.
Evite animar propiedades de diseño siempre que sea posible

3. Reducir Repinturas

Repintar se refiere al dibujo de píxeles en la pantalla, y es un proceso costoso como Reflow. Los repintados pueden activarse mediante Reflows, desplazamiento de página, cambios en propiedades como el color, la visibilidad y la opacidad..

Evitar repintados frecuentes y enormes., usar menos de las propiedades que causan reparaciones costosas como sombras.

Si está animando las propiedades de un elemento que puede desencadenar Repintar directa o indirectamente, será una gran ventaja. Si ese elemento está en su propia capa. impidiendo que el proceso de pintado afecte al resto de la página y activando la aceleración de hardware. En la incorporación de hardware, la GPU asumirá la tarea de realizar los cambios de animación en la capa, ahorrando trabajo adicional a la CPU y acelerando el proceso.

En algunos navegadores, opacidad (con un valor inferior a 1) y transformar (valor distinto de ninguna) se promueven automáticamente a nuevas capas, y la aceleración de hardware se aplica para animaciones y transiciones. Por lo tanto, preferir estas propiedades para animaciones es bueno.

A la fuerza Promueve un elemento a una nueva capa y entra en la aceleración de hardware. Para la animación, hay dos técnicas involucradas:

añadir transformar: translate3d (0, 0, 0); al elemento, engañando al navegador para que active la aceleración de hardware para animaciones y transiciones.
añade el cambiará propiedad del elemento, que informa al navegador de las propiedades que es probable que cambien en el elemento en el futuro. Nota: Sara Soueidan tiene un artículo en profundidad y muy útil sobre esto en el sitio de Dev.Opera.

Resumir:

Evita los estilos caros que causan repinturas.
Busque la promoción de capas y la aceleración de hardware para animaciones y transiciones fuertes.

Tomar nota

(1) Hasta ahora, no hemos tocado la reducción del tamaño del archivo CSS. Hemos mencionado que la reducción en las reglas de estilo (y los elementos DOM) hacen una mejora significativa en el rendimiento debido a cuánto tendrá que funcionar el navegador Menos En el proceso de computar los estilos.. Como consecuencia de esta reducción de código, se escriben mejores selectores y se elimina la CSS no utilizada., el tamaño del archivo disminuirá automáticamente.

(2) También es recomendable no realizar demasiados cambios consecuentes en los estilos de un elemento en JavaScript. En su lugar, agregue una clase al elemento (utilizando JavaScript) que contiene los nuevos estilos para realizar estos cambios; esto evita reflujos innecesarios.

(3) querrás evitar la paliza de diseño también (Reflows forzado síncrono) que surge debido al acceso y modificación de las propiedades de Diseño de los elementos utilizando JavaScript. Lea más sobre cómo esto mata el rendimiento aquí..