content-visibilitydans Chromium 85. Cela devrait considérablement affecter la vitesse du premier chargement et du premier rendu sur le site; de plus, vous pouvez interagir immédiatement avec le contenu nouvellement rendu, sans attendre le chargement du reste du contenu. content-visibilityoblige l'agent utilisateur à ignorer le marquage et la peinture des éléments qui ne sont pas à l'écran. En fait, cela fonctionne comme un chargement différé, non seulement sur le chargement des ressources, mais sur leur rendu.
Dans cette démo
content-visibility: auto, lorsqu'il est appliqué à un contenu fractionné, il donne une vitesse de rendu 7 fois plus rapide
Soutien
content-visibilitybasé sur les primitives de la spécification CSS Containment . Bien qu'elle content-visibilityne soit actuellement prise en charge que dans Chromium 85 (et considérée comme "prototypable" dans Firefox), la spécification de confinement est prise en charge dans la plupart des navigateurs modernes.
Principe d'opération
L'objectif principal de CSS Containment est d'améliorer les performances de rendu du contenu Web en fournissant une isolation prévisible du sous-arbre DOM du reste de la page.
Fondamentalement, le développeur peut indiquer au navigateur quelles parties de la page sont encapsulées en tant qu'ensemble de contenu, ce qui permet aux navigateurs de manipuler le contenu sans avoir à considérer l'état en dehors du sous-arbre. Le navigateur peut optimiser le rendu de la page en sachant quels sous-arbres contiennent du contenu isolé.
Il existe quatre types de confinement CSS, chacun servant de valeur pour une propriété CSS
containet pouvant être combiné avec d'autres:
size: , . , , .layout: . , , , .style: , , , (, ). , , , — .paint: . , , . , .
content-visibility
Il peut être difficile de savoir quelles valeurs
containutiliser, car les optimisations du navigateur ne peuvent fonctionner qu'avec le jeu de paramètres correct. Cela vaut la peine de jouer avec les valeurs pour découvrir empiriquement ce qui fonctionne le mieux. Mieux vaut l'utiliser content-visibilitypour le réglage automatique contain. content-visibility: autogarantit l'augmentation maximale possible de la productivité avec un minimum d'effort.
En mode automatique, la propriété obtient les attributs de mise en page, de style et de peinture, et lorsque l'élément sort des bords de l'écran, il prend de la taille et arrête de peindre et de vérifier le contenu. Cela signifie que dès qu'un élément quitte la zone de rendu, ses descendants arrêtent le rendu. Le navigateur reconnaît les dimensions de l'élément, mais ne fait rien d'autre tant que le rendu n'est pas nécessaire.
Exemple - blog de voyage
Habituellement, un blog de voyage contient plusieurs histoires avec des images et des descriptions. Voici ce qui se passe dans un navigateur classique lorsqu'il accède à un blog de voyage:
- Une partie de la page est chargée depuis le réseau avec les ressources nécessaires
- Le navigateur stylise et place tout le contenu sur la page sans faire de distinction entre le contenu visible et invisible
- Le navigateur passe à l'étape 1 jusqu'à ce que toutes les ressources soient chargées
À l'étape 2, le navigateur traite le contenu en essayant de trouver les modifications. Il met à jour les styles et la mise en page de tout nouvel élément, ainsi que les éléments qui peuvent avoir été modifiés à la suite des mises à jour. C'est le rendu. Ça prend du temps.
Imaginons maintenant ce que nous mettons
content-visibility: autosur chaque article de blog. Le système de base est le même: le navigateur télécharge et rend des parties de la page. Cependant, la différence dans la quantité de travail effectuée à l'étape 2.Ccontent-visibilityle navigateur stylisera et placera le contenu que l'utilisateur voit actuellement (sur l'écran). Mais lors de la gestion des histoires hors écran, le navigateur ignorera le rendu de l'élément entier et n'hébergera que le conteneur. Les performances de chargement de cette page seront comme si elle avait rempli des messages à l'écran et des conteneurs vides pour chaque message en dehors de celle-ci. Cela s'avère beaucoup plus rapide, gagnant jusqu'à 50% du temps de chargement. Dans notre exemple, nous constatons une amélioration du rendu de 232 ms à 30 ms, ce qui représente une amélioration de 7x des performances.
Que devez-vous faire pour profiter de ces avantages? Tout d'abord, nous divisons le contenu en parties:
après, nous appliquons le style suivant aux parties:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
Pour comprendre les avantages potentiels
content-visibility, le navigateur doit appliquer des contraintes de dimensionnement pour s'assurer que le rendu du contenu n'affecte pas les dimensions des éléments. Cela signifie que l'élément sera placé comme s'il était vide. Si l'élément n'a pas de hauteur définie, alors il sera égal à zéro.
Heureusement, css a une autre capacité,
contain-intrinsic-sizqui permet de déterminer la taille réelle d'un élément s'il a été compressé. Dans notre exemple, nous définissons la largeur et la hauteur à environ 1000 px.
Cela signifie qu'il sera positionné comme s'il y avait un seul fichier de "taille interne", tout en s'assurant que le div occupe toujours de l'espace.
contain-intrinsic-siz .
Masquer le contenu de content-visibility: hidden
content-visibility: hiddenfait ce qu'il content-visibility: autofait avec le contenu hors écran. Cependant, contrairement à auto, il ne lance pas automatiquement le rendu du contenu à l'écran.
Comparez cela aux méthodes habituelles pour masquer le contenu des éléments:
- display: none: masque l'élément et supprime l'état de rendu. Cela signifie que la récupération d'un article coûtera la même charge que la création d'un nouvel article.
- visibilité: masqué: masque l'élément et laisse l'état de rendu. Cela ne supprime pas réellement l'élément du document, car il (et son sous-arbre) occupe toujours un espace géométrique sur la page et peut toujours être cliqué. Il met également à jour l'état de rendu chaque fois que nécessaire, même s'il est masqué.
content-visibility: hiddend'autre part, masque l'élément tout en conservant l'état de rendu de sorte que si des modifications sont nécessaires, elles ne se produiront que lorsque l'élément est affiché à l'écran.
Conclusion
content-visibilityet la spécification de confinement CSS vous permet d'accélérer considérablement le rendu et le chargement des pages sans aucune manipulation complexe, sur du CSS nu.
La spécification de confinement CSS
MDN Docs sur CSS Containment
Brouillons CSSWG
Les informations suivantes ont été utilisées dans la préparation du matériel - web.dev/content-visibility
La publicité
Serveurs pour héberger des sites - c'est notre épopée ! Tous les serveurs «prêts à l'emploi» sont protégés des attaques DDoS, installation automatique d'un panneau de contrôle VestaCP pratique. Mieux vaut l'essayer une fois;)
