Les navigateurs modernes sont nettement plus efficaces pour rendre le code HTML, CSS et JavaScript complexes complexes, convertissant le code en pages disponibles en quelques millisecondes.

Alors, comment les développeurs frontaux peuvent-ils encore améliorer la vitesse de rendu du navigateur? En plus des meilleures pratiques qui sont facilement oubliées (en particulier lorsque nous avons un contr?le limité sur le code généré), comme la rationalisation du sélecteur CSS, le maintien de la structure HTML à plat et la prise en charge de manipuler le HTML et le CSS en JavaScript, nous pouvons également profiter contain du CSS.

contain permet aux développeurs de spécifier dans quelle mesure un élément et son contenu est indépendant du reste de l'arborescence de documents. Cela permet au navigateur de recalculer les dispositions, les styles, les dessins, les tailles ou toute combinaison d'eux uniquement pour une zone limitée du DOM (plut?t que toute la page), ce qui entra?ne une amélioration significative des performances.

En termes simples, contain peut fournir une invite pour le navigateur sur la relation entre les éléments de la page, qui sont généralement des éléments de conteneur qui contiennent du contenu, même si le contenu est dynamique. Par exemple, dans les applications de page unique (SPA), le contenu dynamique est souvent inséré et supprimé dans la page, souvent indépendante des autres contenus de la page.

Le navigateur ne peut pas prédire les modifications de mise en page futures qui peuvent résulter de l'insertion JavaScript et de la suppression du contenu de la page. Même des opérations simples, telles que l'ajout de noms de classe aux éléments, animer les éléments DOM ou l'obtention de tailles d'éléments, peuvent conduire à un réarrangement et à la redémarrage des pages, qui sont co?teux et doivent être évités ou réduits autant que possible.

Les développeurs peuvent prédire les changements futurs possibles en fonction de l'expérience utilisateur de la conception de la page. Par exemple, lorsqu'un utilisateur clique sur un bouton, les données d'appel seront insérées dans un élément div dans la vue actuelle. Nous savons que cela est possible, mais le navigateur ne le fait pas. Nous savons également que l'insertion de données dans l'élément div ne modifiera probablement pas les effets visuels ou d'autres aspects d'autres éléments de la page.

Les développeurs de navigateurs ont passé beaucoup de temps à optimiser leurs navigateurs pour gérer cette situation. Bien qu'il existe différentes fa?ons d'aider le navigateur à gérer cette situation plus efficacement, des conseils plus directs peuvent être plus utiles. contain nous fournit un moyen de fournir ces conseils.

Diverses usages de contain

contain a trois valeurs, qui peuvent être utilisées seule ou en combinaison: size , layout et paint . Il a également deux valeurs d'abréviation pour les combinaisons courantes: strict et content . Comprenons ce que signifie chaque valeur.

Il convient de noter que de nombreuses règles et cas de bord pour chaque valeur sont couverts dans la spécification. Dans la plupart des cas, ces règles peuvent ne pas attirer beaucoup d'attention. Cependant, si vous obtenez des résultats inattendus, un aper?u rapide de la spécification peut être utile.

Il existe également un style qui contient des types dans la spécification, qui ne seront pas introduits dans cet article. La raison en est que les types d'inclusion de style actuels sont considérés comme peu de valeur et risquent actuellement d'être retirés de la spécification.

size contient

size contient est facile à expliquer. Lorsque le conteneur contenant cela inclut participe aux calculs de mise en page, le navigateur peut ignorer une partie considérable des calculs car il ignore les éléments enfants du conteneur. Le conteneur devrait avoir une hauteur et une largeur définies; Sinon, il s'effondrera, et c'est le seul facteur à considérer dans la disposition de la page. Il est considéré comme n'ayant rien.

Notez que les éléments enfants peuvent affecter la taille de leur conteneur, selon le style du conteneur. Cela doit être pris en compte lors du calcul de la disposition; En utilisant l'inclusion size , il ne doit pas être pris en compte. Une fois le conteneur déterminé par rapport à la taille de la page, la disposition de ses éléments enfants sera calculée.

size elle-même ne fournit pas beaucoup d'optimisation. Il est généralement utilisé en combinaison avec d'autres valeurs.

Cependant, un avantage qu'il peut fournir est d'aider à gérer JavaScript qui modifie les éléments de l'enfant des conteneurs en fonction de la taille des conteneurs, tels que le type de requête de conteneur. Dans certains cas, la modification de l'élément enfant en fonction de la taille du conteneur peut faire modifier le conteneur la taille après avoir apporté des modifications à l'élément enfant. étant donné que le changement de taille du conteneur peut déclencher un autre changement de l'élément enfant, vous pouvez vous retrouver avec une boucle de changement. size contient peut aider à prévenir cette boucle.

Voici un exemple complètement artificiel de ce concept de boucle de redimensionnement: (un exemple de code doit être inséré ici montrant comment size contient comment empêcher les boucles de redimension)

layout contient

layout contient une disposition qui indique au navigateur que les éléments externes n'affectent pas la disposition interne de l'élément de conteneur, et il n'affecte pas non plus la disposition interne de l'élément de conteneur affecte les éléments externes. Par conséquent, lorsque le navigateur effectue des calculs de mise en page, il peut supposer que le fait d'avoir les différents éléments contenus dans layout n'affectera pas d'autres éléments. Cela peut réduire la quantité de calculs qui doivent être effectués.

Un autre avantage est que si le conteneur est hors écran ou bloqué, les calculs pertinents peuvent retarder ou réduire la priorité. Un exemple fourni par la spécification est:

[…] Par exemple, si la bo?te inclue est vers la fin du conteneur de blocs et que vous regardez le début du conteneur de blocs

Un conteneur avec layout contient un bloc contenant des éléments enfants en position absolue ou fixe. C'est la même chose que l'application de la position relative au conteneur. N'oubliez donc pas comment affecter les éléments enfants du conteneur lors de l'application de ce type d'inclusion.

De même, le conteneur obtient un nouveau contexte d'empilement, de sorte que z-index est utilisé de la même manière que l'application est relative, absolue ou fixe. Cependant, la définition top , right , bottom ou left n'a aucun effet sur le conteneur.

Voici un exemple simple: (Un exemple de code doit être inséré ici montrant comment layout contient affecte la mise en page et le contexte d'empilement)

paint contient

paint contient en disant au navigateur que les éléments enfants du récipient ne seront jamais dessinés à l'extérieur de la limite de la taille de la bo?te de conteneur. Ceci est similaire au réglage overflow: hidden; sur un conteneur, mais avec quelques différences.

Tout d'abord, le conteneur est géré de la même manière que dans l'inclusion layout : il devient un bloc contenant avec son propre contexte d'empilement. Par conséquent, les éléments enfants positionnés dans paint comprendront le conteneur en termes de position. Si nous voulons copier la layout ci-dessus, incluez la démo mais que l'utilisation paint inclut à la place, le résultat sera à peu près le même. La différence est que lorsque l'application contient, la ligne violette ne déborde pas du conteneur, mais est coupée à la bordure du conteneur.

Un autre avantage intéressant de paint comprend est que si le navigateur peut détecter que le conteneur lui-même n'est pas visible dans la fenêtre, il peut ignorer le calcul de dessin des éléments enfants de cet élément. Si le conteneur n'est pas dans la fenêtre ou est obstrué d'une manière ou d'une autre, ses enfants sont garantis d'être invisibles. Par exemple, considérez un menu de navigation qui est généralement situé de l'écran sur le c?té gauche de la page, qui glisse lorsque le bouton est cliqué. Lorsque le menu est dans son état hors écran normal, le navigateur saute simplement en essayant de dessiner son contenu.

Diverses combinaisons de

Ces trois incluent différentes méthodes qui affectent les calculs de rendu effectués par le navigateur. size contient en indiquant au navigateur que ce conteneur ne doit pas provoquer un décalage de position sur la page lorsque son contenu change. layout contient en disant au navigateur que les éléments enfants de ce conteneur ne doivent pas entra?ner des changements de mise en page dans les éléments en dehors de son conteneur, et vice versa. paint contient en disant au navigateur que le contenu de ce récipient ne sera jamais dessiné à l'extérieur de la taille du conteneur et que si le conteneur est bloqué, le contenu ne sera pas du tout dessiné.

étant donné que chacun offre des optimisations différentes, il est logique de combiner certains des incluse. La spécification le permet en fait. Par exemple, nous pouvons utiliser layout et paint comme valeur de contain comme suit:

 .el {
  Contient: la peinture de mise en page;
}

Comme il s'agit d'une chose très évidente, la spécification fournit en fait deux valeurs d'abréviation:

content sera la valeur la plus couramment utilisée dans un projet Web, contenant de nombreux éléments dynamiques, tels que de grands conteneurs multiples qui modifient le contenu au fil du temps ou de l'activité utilisateur.

strict est utile pour les conteneurs de tailles définies qui ne changent jamais de tailles (même si le contenu change). Une fois en place, il maintiendra la taille attendue. Un exemple simple est un div contenant du contenu publicitaire externe tiers, dont les dimensions sont définies par l'industrie et n'ont rien à voir avec d'autres éléments DOM sur la page.

Avantages de performance

Cette partie de l'article est difficile à expliquer. Le problème est qu'il n'y a pas beaucoup d'effets visuels sur les avantages des performances. La plupart des avantages sont des optimisations en coulisses, aidant le navigateur à décider quoi faire lors de la mise en page ou des modifications de dessin.

Pour montrer les avantages de performance de l'attribut contain , j'ai fait un exemple simple, qui a changé la taille de la police d'un élément avec plusieurs éléments enfants. Ce changement déclenche généralement un relais, ce qui entra?ne également la redessation de la page. Cet exemple couvre contain de none , content et strict . (Les exemples de code et les résultats des tests de performances doivent être insérés ici)

Disposition une fois, dessiner deux fois

Veuillez écouter mon explication patiemment. Je promets que cela aura du sens.

J'utiliserai la démonstration ci-dessus comme base de la description suivante. Si vous souhaitez continuer à apprendre, visitez la version complète de la démo et ouvrez Devtools. Notez qu'après avoir exécuté l'outil de performances, vous devez activer les détails du "cadre" au lieu de la chronologie "principale" pour voir ce que je suis sur le point de décrire.

Je prends en fait des captures d'écran de la version "FullPage", car Devtools fonctionne mieux dans cette version. Cela dit, la version régulière de "Full" devrait fournir à peu près la même idée.

Dans le journal des événements de la tache qui n'est pas inclus, l'événement de dessin n'est déclenché qu'une seule fois. En règle générale, les événements ne prennent pas trop de temps, allant de 0,2 milliseconde à 3,6 millisecondes. Les détails plus profonds sont là où il devient intéressant. Dans ces détails, il indique que la zone de dessin est la page entière. Dans le journal des événements, Devtools met même en évidence la zone de page dessinée si vous survolez l'événement Draw. Dans ce cas, la taille sera de la taille de la fenêtre de navigateur. Il remarquera également la racine de couche dessinée.

Notez que la zone de page à gauche de l'image est mise en évidence, même en dehors de la bo?te violette. Sur le c?té droit, la taille est tirée sur l'écran. Dans ce cas, il est approximativement de la taille de la fenêtre. Pour les comparaisons futures, veuillez noter #Document comme racine de couche.

N'oubliez pas que le navigateur a des concepts de calque pour certains éléments pour aider à dessiner. Les couches sont souvent utilisées pour les éléments qui peuvent se chevaucher les uns avec les autres en raison du nouveau contexte d'empilement. Un exemple est l'application de position: relative; et z-index: 1; à un élément amènera le navigateur à créer l'élément comme une nouvelle couche. contain le même effet.

Il y a une section dans Devtools appelée "rendu" qui fournit divers outils pour voir comment le navigateur rend la page. Lors de la sélection d'une case à cocher appelée "Layer Borders", nous pouvons voir différents contenus en fonction de l'inclusion. Lorsque l'inclusion none , vous ne devez pas voir les couches au-delà de la couche de page Web statique typique. Sélectionnez content ou strict et vous pouvez voir que la bo?te violette se convertit en sa propre couche et que le reste de la page change en conséquence. (Les captures d'écran doivent être insérées ici pour montrer les couches sous différents types d'inclusion)

Comme je l'ai mentionné précédemment, content et strict provoquent le licenciement de l'événement de tirage deux fois. En effet, deux processus de dessin différents sont effectués pour deux raisons différentes. Dans ma démo, le premier événement est pour la bo?te violette et le deuxième événement est pour le contenu de la bo?te violette.

En règle générale, le premier événement dessinera une bo?te violette et rapportera les dimensions de cette bo?te dans le cadre de l'événement. La bo?te est désormais sa propre couche et bénéficie des avantages qu'il applique.

Le deuxième événement est utilisé pour le contenu de la bo?te car ils font défiler les éléments. Comme l'explique la spécification; étant donné que le contexte d'empilement est garanti, l'élément de défilement peut être dessiné en une seule couche GPU. La taille plus élevée signalée dans le deuxième événement est la hauteur de l'élément de défilement. Probablement encore plus étroit pour faire de la place pour les barres de défilement.

Notez la différence dans les dimensions à droite de ces deux images. De plus, les racines de couche des deux événements sont principales.Change au lieu du #Document vu ci-dessus. La bo?te violette est un élément principal, donc seulement cet élément est dessiné au lieu de l'ensemble du document. Vous pouvez voir la bo?te en surbrillance au lieu de toute la page.

L'avantage est que lorsque les éléments de défilement sont généralement faits pour être dessinés lorsqu'ils entrent dans le champ de vision. Les éléments de défilement du confinement ont été dessinés, ils ne sont donc pas nécessaires pour être à nouveau dessinés lors de la saisie du champ de vision. Nous obtenons donc également des optimisations roulantes.

Encore une fois, cela peut être vu dans la démo. (Les captures d'écran doivent être insérées ici pour montrer les performances de défilement sous différents types d'inclusion)

Une découverte accidentelle intéressante

J'ai eu un problème intéressant lorsque j'ai essayé la démo ci-dessus et j'ai compris comment fonctionnent les aspects des performances de dessin et de défilement. Dans un test, j'ai une bo?te simple au centre de la page, mais avec un style minimal. C'est essentiellement un élément de défilement avec beaucoup de contenu texte. J'ai appliqué le contenu aux éléments de conteneur, mais je n'ai pas vu les avantages de performances de défilement décrits ci-dessus.

Le conteneur est marqué d'une superposition "Repreintes on Scroll" et le scintillement du dessin est le même que si l'inclusion n'est pas appliquée, même si je sais que le contenu contient est réellement appliqué au conteneur. J'ai donc commencé à comparer mes tests simples à la version plus riche en styles discutée ci-dessus.

J'ai fini par constater que si background-color du conteneur est transparente, il n'y a pas d'avantages de performance de défilement d'inclusion.

J'ai effectué un test de performance similaire où je modifierai la taille de la police du contenu pour déclencher un relais et redessiner. Les résultats des deux tests sont à peu près les mêmes, la seule différence est que background-color du premier test est transparente et background-color du deuxième test est la couleur appropriée. D'après les chiffres, les calculs en coulisses sont encore plus efficaces; Seuls les événements de complot sont différents. Il semble que les éléments ne deviennent pas leur propre couche dans le calcul de dessin avec background-color transparente.

Le premier test n'a qu'un seul événement de tirage dans le journal des événements. Le deuxième test a deux événements de l'intrigue, comme je m'y attendais. Sans cette couleur d'arrière-plan, le navigateur semble décider de sauter les aspects de couche inclus. J'ai même constaté que forger la transparence en utilisant la même couleur que celle derrière l'élément fonctionne également bien. Je suppose que si l'arrière-plan du conteneur est transparent, il doit dépendre de tout ce qui est ci-dessous, ce qui rend impossible de séparer le conteneur en sa propre couche de dessin. (Les captures d'écran doivent être insérées ici pour montrer différents résultats sous des couleurs d'arrière-plan transparentes et des couleurs d'arrière-plan opaques)

J'ai fait une autre version de la démo de test qui a changé background-color de l'élément de conteneur de transparent à la même couleur que la couleur de l'arrière-plan du corps. Voici deux captures d'écran de l'utilisation des différentes options du panneau "Rendu" dans Devtools. (Les captures d'écran doivent être insérées ici pour montrer différents résultats sous des couleurs d'arrière-plan transparentes et des couleurs d'arrière-plan opaques)

Résumer

Cet article présente les bases du CSS contain des propriétés, y compris leurs valeurs, leurs avantages et leurs améliorations potentielles sur les performances. Il y a certains avantages à appliquer cet attribut à certains éléments de HTML; Quels éléments doivent appliquer cet attribut appartient à vous. Du moins, c'est ce que je comprends, car je ne connais aucun conseil spécifique. L'idée générale est de l'appliquer à des conteneurs d'autres éléments, en particulier ceux qui ont un aspect dynamique.

Quelques scénarios possibles: zones de grille de la grille CSS, éléments contenant du contenu tiers et des conteneurs avec du contenu dynamique basé sur l'interaction utilisateur. Il ne devrait pas y avoir de mal à utiliser cette propriété dans ces cas, en supposant que vous n'essayez pas d'inclure un élément qui dépend réellement d'un autre élément en dehors de cela.

Le support du navigateur est très puissant. Safari est le seul navigateur qui n'est pas pris en charge actuellement. Quoi qu'il en soit, vous pouvez toujours utiliser la propriété car si le navigateur ne comprend pas la propriété ou sa valeur, il saute simplement le code sans erreur.

Alors n'hésitez pas à commencer à inclure votre contenu!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!