Catégories
Astuces et Design

la nouvelle propriété CSS qui améliore vos performances de rendu

Améliorez le temps de chargement initial en ignorant le rendu du contenu hors écran.

le
content-visibility
property, lancé dans Chromium 85, pourrait être l'un des nouveaux CSS les plus percutants
propriétés pour améliorer les performances de chargement des pages. content-visibility active le
agent utilisateur pour ignorer le travail de rendu d'un élément, y compris la mise en page et la peinture,
jusqu'à ce qu'il soit nécessaire. Parce que le rendu est ignoré, si une grande partie de votre
le contenu est hors écran, tirant parti du content-visibility propriété rend le
charge de l'utilisateur initial beaucoup plus rapide. Il permet également des interactions plus rapides avec le
contenu à l'écran. Génial.

démo avec des chiffres représentant les résultats du réseau

Dans notre démonstration d'article, appliquer content-visibility: auto aux zones de contenu fragmentées donne un 7x amélioration des performances de rendu lors de la charge initiale. Continuez à lire pour en savoir plus.

Prise en charge du navigateur #

content-visibility repose sur des primitives dans le le confinement CSS
Spec
. Tandis que content-visibility est seulement
pris en charge dans Chromium 85 pour le moment (et réputé "vaut
prototypage "
pour
Firefox), la spécification de confinement est prise en charge dans le plus moderne
navigateurs
.

Containment CSS #

L'objectif principal et primordial du confinement CSS est d'activer le rendu
amélioration des performances du contenu Web en fournissant isolement prévisible de
un sous-arbre DOM
du reste de la page.

Fondamentalement, un développeur peut dire à un navigateur quelles parties de la page sont encapsulées
comme un ensemble de contenu, permettant aux navigateurs de raisonner sur le contenu sans
besoin de considérer l'état en dehors du sous-arbre. Savoir quels éléments de contenu
(sous-arborescences) contiennent un contenu isolé signifie que le navigateur peut effectuer une optimisation
décisions pour le rendu des pages.

Il existe quatre types de CSS
endiguement
,
chacun une valeur potentielle pour le contain Propriété CSS, qui peut être combinée
ensemble dans une liste de valeurs séparées par des espaces:

  • size: Le confinement de la taille sur un élément garantit que la boîte de l'élément peut être
    aménagé sans avoir besoin d'examiner ses descendants. Cela signifie que nous pouvons
    sauter potentiellement la disposition des descendants si tout ce dont nous avons besoin est la taille du
    élément.
  • layout: Le confinement de la disposition signifie que les descendants n'affectent pas le
    mise en page externe des autres cases de la page. Cela nous permet de sauter potentiellement
    disposition des descendants si tout ce que nous voulons faire est de disposer d'autres cases.
  • style: Le confinement du style garantit que les propriétés qui peuvent avoir des effets sur
    plus que ses descendants n'échappent pas à l'élément (par exemple, les compteurs). Ce
    nous permet de sauter potentiellement le calcul de style pour les descendants si tout ce que nous
    veut est de calculer des styles sur d'autres éléments.
  • paint: Le confinement de la peinture garantit que les descendants de la boîte contenant
    ne pas afficher en dehors de ses limites. Rien ne peut visiblement déborder l'élément,
    et si un élément est hors écran ou autrement non visible, ses descendants
    également pas être visible. Cela nous permet de sauter potentiellement la peinture
    descendants si l'élément est hors écran.

Ignorer le travail de rendu avec content-visibility #

Il peut être difficile de déterminer quelles valeurs de confinement utiliser, car le navigateur
les optimisations ne peuvent intervenir que lorsqu'un ensemble approprié est spécifié. Vous pouvez
jouer avec les valeurs à voir ce qui fonctionne
meilleur
, ou toi
peut utiliser une autre propriété CSS appelée content-visibility pour appliquer le nécessaire
confinement automatiquement. content-visibility garantit que vous obtenez le plus grand
gains de performances que le navigateur peut fournir avec un minimum d'efforts de votre part en tant que
développeur.

La propriété content-visibilité accepte plusieurs valeurs, mais auto est celui
qui fournit des améliorations de performances immédiates. Un élément qui a
content-visibility: auto gains layout, style et paint endiguement. Si
l'élément est hors écran (et autrement non pertinent pour l'utilisateur – pertinent
éléments seraient ceux qui ont le focus ou la sélection dans leur sous-arbre), il
gagne aussi size confinement (et ça s'arrête
La peinture
et
test de succès
son contenu).

Qu'est-ce que ça veut dire? En bref, si l'élément est hors écran, ses descendants sont
pas rendu. Le navigateur détermine la taille de l'élément sans tenir compte
l’un de ses contenus, et il s’arrête là. La plupart des rendus, tels que le style
et la disposition du sous-arbre de l'élément sont ignorées.

Lorsque l'élément s'approche de la fenêtre, le navigateur n'ajoute plus le size
confinement et commence à peindre et à tester le contenu de l'élément. Ce
permet au travail de rendu d'être effectué juste à temps pour être vu par l'utilisateur.

Exemple: un blog de voyage #

Dans cet exemple, nous basons notre blog de voyage sur la droite et appliquons content-visibility: auto aux zones fragmentées sur la gauche. Les résultats montrent des temps de rendu allant de 232 ms à 30 ms lors du chargement initial de la page.

Un blog de voyage contient généralement un ensemble d'histoires avec quelques images, et certaines
texte descriptif. Voici ce qui se passe dans un navigateur classique lorsqu'il accède à
un blog de voyage:

  1. Une partie de la page est téléchargée à partir du réseau, ainsi que les éventuels
    Ressources.
  2. Le navigateur met en forme et présente tout le contenu de la page, sans
    considérant si le contenu est visible pour l'utilisateur.
  3. Le navigateur revient à l'étape 1 jusqu'à ce que toutes les pages et ressources soient
    téléchargé.

À l'étape 2, le navigateur traite tous les contenus à la recherche d'éléments qui peuvent
ont changé. Il met à jour le style et la mise en page de tous les nouveaux éléments, ainsi que
les éléments qui peuvent avoir changé à la suite de nouvelles mises à jour. C'est le rendu
travail. Cela prend du temps.

Une capture d'écran d'un blog de voyage.

Un exemple de blog de voyage. Voir la démo sur Codepen

Maintenant, considérez ce qui se passe si vous mettez content-visibility: auto sur chacun des
histoires individuelles dans le blog. La boucle générale est la même: le navigateur
télécharge et rend des morceaux de la page. Cependant, la différence réside dans le
la quantité de travail qu'il effectue à l'étape 2.

Avec la visibilité du contenu, il stylisera et mettra en page tous les contenus qui sont
actuellement visibles par l'utilisateur (ils sont à l'écran). Cependant, lors du traitement du
histoire qui est complètement hors écran, le navigateur ignorera le travail de rendu et
seulement le style et la disposition de la boîte d'élément elle-même.

Les performances de chargement de cette page seraient comme si elle contenait le plein écran
histoires et boîtes vides pour chacune des histoires hors écran. Cela fonctionne beaucoup
mieux, avec réduction prévue de 50% ou plus du coût de rendu de
chargement. Dans notre exemple, nous voyons un coup de pouce d'un 232 ms temps de rendu à un
30 ms temps de rendu. C'est un 7x amélioration des performances.

Quel travail devez-vous faire pour profiter de ces avantages? Premièrement, nous
découpez le contenu en sections:

Une capture d'écran annotée de découpage du contenu en sections avec une classe CSS.

Exemple de découpage du contenu en sections avec le story classe appliquée, recevoir content-visibility: auto. Voir la démo sur Codepen

Ensuite, nous appliquons la règle de style suivante aux sections:

.story {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}

Notez qu'à mesure que le contenu entre et sort de la visibilité, il démarre
et arrêtez d'être rendu si nécessaire. Cependant, cela ne signifie pas que le navigateur
devra rendre et restituer le même contenu encore et encore, car
le travail de rendu est enregistré lorsque cela est possible.

Spécifier la taille naturelle d'un élément avec contain-intrinsic-size #

Afin de réaliser les avantages potentiels de content-visibility, le navigateur
doit appliquer une limitation de taille pour garantir que les résultats de rendu du contenu
n'affecte en aucune façon la taille de l'élément. Cela signifie que l'élément
sera disposé comme s'il était vide. Si l'élément n'a pas de hauteur spécifiée
dans une disposition de bloc normale, alors il aura une hauteur de 0.

Ce n'est peut-être pas l'idéal, car la taille de la barre de défilement va changer, étant
dépendant de chaque histoire ayant une hauteur non nulle.

Heureusement, CSS fournit une autre propriété, contain-intrinsic-size, lequel
spécifie efficacement la taille naturelle de l'élément si l'élément est
affecté par le confinement de la taille
. Dans notre exemple, nous le définissons sur 1000px comme
une estimation de la hauteur et de la largeur des sections.

Cela signifie qu'il se présentera comme s'il avait un seul enfant de "taille intrinsèque"
dimensions, en veillant à ce que vos divs non dimensionnés occupent toujours de l'espace.
contain-intrinsic-size agit comme une taille d'espace réservé au lieu du contenu rendu.

Masquer le contenu avec content-visibility: hidden #

Que faire si vous souhaitez que le contenu ne soit pas rendu, qu'il soit ou non
est à l'écran, tout en tirant parti des avantages de l'état de rendu mis en cache? Entrer:
content-visibility: hidden.

le content-visibility: hidden la propriété vous offre tous les mêmes avantages
contenu non rendu et état de rendu mis en cache comme content-visibility: auto Est-ce que
hors écran. Cependant, contrairement à auto, il ne commence pas automatiquement à
rendre à l'écran.

Cela vous donne plus de contrôle, vous permettant de masquer le contenu d'un élément et
plus tard, affichez-les rapidement.

Comparez-le à d'autres moyens courants de masquer le contenu d'un élément:

  • display: none: masque l'élément et détruit son état de rendu. Ce
    signifie que démasquer l'élément est aussi coûteux que de rendre un nouvel élément avec le
    même contenu.
  • visibility: hidden: masque l'élément et conserve son état de rendu. Ce
    ne supprime pas vraiment l'élément du document, car il (et c'est un 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 à tout moment, même lorsqu'il est masqué.

content-visibility: hidden, d'autre part, masque l'élément tandis que
en préservant son état de rendu, donc, s'il y a des changements qui doivent
se produisent, ils ne se produisent que lorsque l'élément est à nouveau montré (c.-à-d.
content-visibility: hidden propriété est supprimée).

Quelques bons cas d'utilisation pour content-visibility: hidden sont lors de la mise en œuvre
défileurs virtuels avancés et mise en page de mesure.

Conclusion #

content-visibility et la spécification de confinement CSS signifie des performances passionnantes
les boosts arrivent directement dans votre fichier CSS. Pour plus d'informations sur ces
propriétés, consultez:

Dernière mise à jour:

Améliorer l'article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *