Une page de deux cents lignes paie la mise en page pour chacune d'entre elles avant la première peinture, même si le visiteur en voit quatre. La propriété content-visibility permet d'ignorer entièrement un sous-arbre jusqu'à ce qu'il s'approche de la fenêtre d'affichage, avec une propriété et une indication de taille.

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

Les deux moitiés

  • content-visibility : auto signifie que le navigateur peut ignorer le rendu, les tests d'impact et le style pour les sous-arbres rendus hors écran.
  • contain-intrinsic-size donne à l'élément ignoré une taille de remplacement afin que les barres de défilement ne sautent pas ; le mot-clé auto permet au navigateur de mémoriser la taille réelle une fois la ligne vue une fois.

Où l'appliquer, où pas

  1. Appliquer par ligne, carte ou section répétée, jamais sur l'ensemble du corps de la page ; sauter le corps va à l'encontre des parchemins de recherche et d'ancrage.
  2. Donnez des tailles intrinsèques honnêtes : une estimation extrêmement erronée produit une disposition de barre de défilement à mesure que les lignes sont atteintes.
  3. Ne l'utilisez pas à l'intérieur d'éléments que l'utilisateur doit rechercher visuellement ; les navigateurs continuent de travailler sur des cas extrêmes, et une arborescence cachée est du texte masqué pour certains outils.

Les pages d'articles de ce site restent modestes, une photo et quelques dizaines de blocs, donc il n'a pas actuellement besoin de la propriété, et c'est la leçon honnête de la mesure : appliquez-la là où le nombre de lignes mord réellement. Sur des pages d'archives ou un changelog de deux mille lignes de profondeur, la victoire est très gacor, et cela coûte deux lignes.