Ayudar a los navegadores a optimizar con la propiedad CSS Contain

Hay un número cada vez mayor de cosas que debemos hacer para ayudar al navegador a lograr el máximo rendimiento.

• La sintaxis de imagen responsiva tiene varias. Por ejemplo, necesitar decirle al navegador qué tan grande será la imagen en nuestro diseño con el sizesatributo y qué tan grandes serán las imágenes con wdescriptores.
• Las imágenes normales siempre han tenido widthatributos heightde presentación, que siempre han sido algo útiles y ahora son realmente útiles .
• La will-changepropiedad en CSS a veces es necesaria para una animación más eficaz.
• Si desea alguna capacidad fuera de línea o mejoras exóticas de rendimiento, debe escribir un código de trabajadores de servicio personalizado.

Ahora tenemos CSS contain, cuyo objetivo es informarle al navegador sobre su diseño para que pueda hacer las cosas más rápido . No es necesario usarlo, pero es una buena mejora para la optimización.

.item {  contain: layout;  contain: paint;  contain: size;  contain: content; /* same as `layout paint` */  contain: strict;  /* same as `layout paint size` */}

Aquí está Rachel específicamente sobre layout:

Con la contención de diseño habilitada, el navegador sabe que nada fuera del elemento puede afectar el diseño interno, y nada desde dentro del elemento puede cambiar nada sobre el diseño de las cosas fuera de él. Esto significa que puede realizar cualquier optimización posible para este escenario.

Estas cosas tienen implicaciones reales, como iniciar z-indexcontextos, limpiar flotadores y ocultar desbordamientos, por lo que definitivamente caen en el territorio de “saber lo que estás haciendo” . Rachel tiene razón sobre los sistemas de diseño:

Sugeriría que esto es una gran cosa para agregar a cualquier componente que cree en una biblioteca de componentes o patrones; si está trabajando de esta manera, es probable que cada componente esté diseñado para ser algo independiente que no afecte a otros elementos en el página, haciendo contain: contentuna adición útil.

Enlace directo →