content-visibility: la nueva propiedad CSS que aumenta el rendimiento de renderizado

Una Kravets y Vladimir Levin:

[…] puedes usar otra propiedad CSS llamada content-visibilitypara aplicar la contención necesaria automáticamente. content-visibilityGarantiza que usted obtendrá las mayores ganancias de rendimiento que el navegador puede proporcionar con el mínimo esfuerzo por su parte como desarrollador.

La content-visibilitypropiedad acepta varios valores, pero autoes el que proporciona mejoras inmediatas de rendimiento.

Los beneficios de rendimiento parecen bastante grandes:

En nuestro ejemplo, vemos un aumento de un tiempo de renderizado de 232 ms a un tiempo de renderizado de 30 ms . Eso es un aumento de rendimiento siete veces mayor .

Aunque es un trabajo manual. Tienes que “seccionar” grandes trozos verticales de la página tú mismo, aplicarlos content-visibility: auto;y luego intentar determinar qué tan altos son, algo así como contain-intrinsic-size: 1000px;. Esa parte de mí parece súper rara. ¿Adivina simplemente a qué altura? ¿Qué pasa si me equivoco? ¿Puedo perjudicar el rendimiento? ¿Puedo (o debería) cambiar ese valor en diferentes ventanas gráficas si la diferencia de altura entre pantallas pequeñas y grandes es drástica?

Parece que tendrías que ser un nerd de rendimiento bastante hábil para hacer esto bien y saber cómo mirar y comparar perfiles de renderizado en DevTools. Una prueba más de que el rendimiento web es su propia vocación.