content-visibilityen Chromium 85. Debería afectar significativamente la velocidad de la primera carga y el primer renderizado en el sitio; además, puede interactuar con el contenido recién renderizado inmediatamente, sin esperar a que se cargue el resto del contenido. content-visibilityobliga al agente de usuario a omitir el marcado y pintado de elementos que no están en la pantalla. De hecho, funciona como una carga diferida, solo no en la carga de recursos, sino en su renderizado.
En esta demostración
content-visibility: auto, cuando se aplica a contenido dividido, ofrece una velocidad de renderización 7 veces más rápida
Apoyo
content-visibilitybasado en primitivas de la especificación CSS Containment . Si bien actualmente content-visibilitysolo se admite en Chromium 85 (y se considera "prototipable" en Firefox), la especificación de contención es compatible con la mayoría de los navegadores modernos.
Principio de funcionamiento
El objetivo principal de CSS Containment es mejorar el rendimiento de la representación del contenido web proporcionando un aislamiento predecible del subárbol DOM del resto de la página.
Básicamente, el desarrollador puede decirle al navegador qué partes de la página están encapsuladas como un conjunto de contenido, lo que permite a los navegadores manipular el contenido sin tener que considerar el estado fuera del subárbol. El navegador puede optimizar la representación de la página al saber qué subárboles contienen contenido aislado.
Hay cuatro tipos de contención de CSS, cada uno de los cuales sirve como valor para una propiedad de CSS
containy se puede combinar con otros:
size: , . , , .layout: . , , , .style: , , , (, ). , , , — .paint: . , , . , .
content-visibility
Puede resultar confuso qué valores son los
containmejores para usar, ya que las optimizaciones del navegador solo pueden funcionar con el conjunto correcto de parámetros. Vale la pena jugar con los valores para descubrir empíricamente qué funciona mejor. Es mejor usarlo content-visibilitypara la sintonización automática contain. content-visibility: autogarantiza el máximo aumento posible de la productividad con el mínimo esfuerzo.
En modo automático, la propiedad obtiene los atributos de diseño, estilo y pintura, y cuando el elemento sale de los bordes de la pantalla, adquiere tamaño y deja de pintar y verificar el contenido. Esto significa que tan pronto como un elemento abandona el área de renderizado, sus descendientes dejan de renderizar. El navegador reconoce el tamaño del elemento, pero no hace nada más hasta que se necesita renderizar.
Ejemplo - blog de viajes
Por lo general, un blog de viajes tiene varias historias con imágenes y descripciones. Esto es lo que sucede en un navegador típico cuando accede a un blog de viajes:
- Parte de la página se carga desde la red junto con los recursos necesarios
- El navegador diseña y coloca todo el contenido en la página sin distinguir entre contenido visible e invisible.
- El navegador va al paso 1 hasta que se cargan todos los recursos
En el paso 2, el navegador procesa el contenido en busca de cambios. Actualiza los estilos y el diseño de cualquier elemento nuevo, junto con los elementos que pueden haber cambiado como resultado de las actualizaciones. Esto es renderizado. Toma tiempo.
Ahora imaginemos lo que ponemos
content-visibility: autoen cada publicación de blog. El sistema básico es el mismo: el navegador descarga y renderiza partes de la página. Sin embargo, la diferencia en la cantidad de trabajo realizado en el paso 2.Ccontent-visibilityel navegador diseñará y colocará el contenido que el usuario está viendo actualmente (en la pantalla). Pero al manejar historias fuera de la pantalla, el navegador omitirá la representación de todo el elemento y solo alojará el contenedor. El rendimiento de carga de esta página será como si hubiera llenado publicaciones en la pantalla y contenedores vacíos para cada publicación fuera de ella. Resulta mucho más rápido, ganando hasta un 50% del tiempo de carga. En nuestro ejemplo, vemos una mejora de la renderización de 232 ms a 30 ms, que es una mejora de 7 veces en el rendimiento.
¿Qué debe hacer para aprovechar estos beneficios? Primero, dividimos el contenido en partes:
después, aplicamos el estilo posterior a las partes:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
Para comprender los beneficios potenciales
content-visibility, el navegador debe imponer restricciones de tamaño para garantizar que la representación del contenido no afecte las dimensiones de los elementos. Esto significa que el artículo se colocará como si estuviera vacío. Si el elemento no tiene una altura definida, será igual a cero.
Afortunadamente, css tiene otra capacidad,
contain-intrinsic-sizque brinda la capacidad de determinar el tamaño real de un elemento si ha sido comprimido. En nuestro ejemplo, establecemos el ancho y el alto en aproximadamente 1000px.
Esto significa que se colocará como si hubiera un solo archivo de "tamaño interno", mientras se asegura que el div aún ocupe espacio.
contain-intrinsic-siz .
Ocultar contenido de content-visibility: hidden
content-visibility: hiddenhace lo que content-visibility: autohace con el contenido fuera de la pantalla. Sin embargo, a diferencia de Auto, no comienza a mostrar contenido automáticamente en la pantalla.
Compare esto con las formas habituales de ocultar el contenido del elemento:
- display: none: oculta el elemento y elimina el estado de representación. Esto significa que recuperar un artículo costará lo mismo que crear uno nuevo.
- visibilidad: oculta: oculta el elemento y abandona el estado de renderizado. En realidad, esto no elimina el elemento del documento, ya que (y su subárbol) todavía ocupa espacio geométrico en la página y aún se puede hacer clic en él. También actualiza el estado de procesamiento siempre que sea necesario, incluso si está oculto.
content-visibility: hiddenpor otro lado, oculta el elemento mientras mantiene el estado de renderizado, de modo que si se necesitan cambios, solo sucederán cuando el elemento se muestre en la pantalla.
Conclusión
content-visibilityy la especificación de contención de CSS le permiten acelerar significativamente el procesamiento y la carga de páginas sin manipulaciones complejas, en CSS simple.
La especificación de contención de CSS
MDN Docs sobre los
borradores de CSSWG de contención de CSS
La siguiente información se utilizó en la preparación del material: web.dev/content-visibility
Publicidad
Servidores para alojar sitios : ¡se trata de nuestra epopeya ! Todos los servidores "listos para usar" están protegidos contra ataques DDoS, instalación automática de un conveniente panel de control VestaCP. Mejor intentarlo una vez;)
