Una página con doscientas filas paga el diseño de todas ellas antes de pintarlas por primera vez, aunque el visitante vea cuatro. La propiedad content-visibility permite omitir un subárbol por completo hasta que se acerque a la ventana gráfica, con una propiedad y una sugerencia de tamaño.

.list-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 84px;
}

las dos mitades

  • visibilidad de contenido: automático significa que el navegador puede omitir la renderización, las pruebas de acceso y el estilo para los subárboles renderizados fuera de la pantalla.
  • contains-intrinsic-size le da al elemento omitido un tamaño suplente para que las barras de desplazamiento no salten; la palabra clave auto permite al navegador recordar el tamaño real después de haber visto la fila una vez.

Dónde aplicarlo, dónde no

  1. Aplicar por fila, tarjeta o sección repetida, nunca a todo el cuerpo de la página; saltarse el cuerpo anula los pergaminos de búsqueda y anclaje.
  2. Proporcione tamaños intrínsecos honestos: una suposición tremendamente incorrecta produce un diseño con barra de desplazamiento a medida que se alcanzan las filas.
  3. No utilizarlo dentro de elementos que el usuario deba buscar visualmente; Los navegadores siguen trabajando en casos extremos y un árbol oculto es texto oculto para algunas herramientas.

Las páginas de artículos de este sitio siguen siendo modestas, una foto y unas pocas docenas de bloques, por lo que actualmente no necesita la propiedad, y esa es la lección honesta de medición: aplíquela donde realmente muerde el recuento de filas. En páginas de archivo o en un registro de cambios de dos mil líneas de profundidad, la ganancia es genial y cuesta dos líneas.