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. Cine de Calidad gratis

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Ayudar a los navegadores a optimizar con la propiedad CSS Contain

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.

programar

es

https://pseint.es/static/images/programar-ayudar-a-los-navegadores-a-optimizar-con-la-propiedad-css-contain-1240-0.jpg

2024-06-13

 

Ayudar a los navegadores a optimizar con la propiedad CSS Contain
Ayudar a los navegadores a optimizar con la propiedad CSS Contain

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences