Optimisation des performances frontales - Optimisation des performances CSS

Cet article présente quelques schémas d'optimisation des performances CSS.

Un CSS clé en ligne du premier écran

Le processus approximatif de rendu:

• Charger les ressources HTML
• Analyser le HTML
• Chargez les ressources CSS et construisez l'arborescence DOM en même temps
• Analyser CSS et rendre l'arborescence DOM en même temps

Lorsque le fichier CSS est trop volumineux, il restera à l'étape 3. Lorsque la vitesse Internet est lente, il n'y a souvent pas de style lors de l'ouverture du site Web.

Nous devons donc charger une partie du CSS (le CSS utilisé pour le premier écran) en premier, et les autres CSS avec une priorité inférieure seront chargés de manière asynchrone.

L'intégration du CSS clé requis pour rendre le contenu au-dessus de la ligne de flottaison dans le HTML permet au CSS d'être téléchargé plus rapidement. Il peut être rendu une fois le téléchargement HTML terminé et le temps de rendu de la page est avancé, raccourcissant ainsi le temps de rendu du premier écran; le
CSS restant utilise des fichiers CSS externes et les télécharge après le téléchargement du document HTML. Cela active les caches, mais en plus de les charger de manière asynchrone.

Inconvénients : le CSS après l'inlining ne sera pas mis en cache et sera re-téléchargé à chaque fois.

Deuxièmement, chargez le CSS de manière asynchrone

CSS bloquera le rendu. Le navigateur ne restituera aucun contenu traité tant que la demande, le téléchargement et l'analyse du fichier CSS ne seront pas terminés. Parfois, ce blocage est nécessaire car nous ne voulons pas que le navigateur commence à afficher la page avant le chargement du CSS requis. Ensuite, une fois que la clé CSS du premier écran est en ligne, le rendu bloquant du contenu CSS restant n'est pas nécessaire, et le CSS externe peut être utilisé et chargé de manière asynchrone.

Plusieurs façons de charger de manière asynchrone

1.js crée dynamiquement l'élément de lien de feuille de style et l'insère dans le DOM.

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

2. Définissez l'attribut média

Définissez l'attribut media de l'élément link sur un type de média (ou requête média) qui ne correspond pas au navigateur de l'utilisateur, tel que media = "print", ou même un type complètement inexistant media = "noexist". Pour le navigateur, si la feuille de style n'est pas adaptée au type de média actuel, sa priorité sera abaissée, et elle sera téléchargée sans bloquer le rendu de la page.

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

Bien sûr, il s'agit simplement d'implémenter le chargement asynchrone du CSS. N'oubliez pas de définir la valeur du média sur screen ou tout après le chargement du fichier, afin que le navigateur puisse commencer à analyser le CSS.

3. Définissez l'attribut rel

Le marquage de l'élément de lien comme feuille de style alternative via l'attribut rel peut également permettre un chargement asynchrone par le navigateur. N'oubliez pas non plus de modifier la rel une fois le chargement terminé.

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

4. rel = "précharge"

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Notez que tel que requis. Ignorer l'attribut as ou l'attribut as incorrect rendra le préchargement égal à une requête XHR. Le navigateur ne sait pas quel contenu est chargé, donc la priorité de chargement de ces ressources sera très faible.

Troisièmement, la compression de fichiers

La taille du fichier affectera directement la vitesse de chargement du navigateur Les versions actuelles de webpack, gulp / grunt, rollup, etc. supportent également la compression CSS. Le fichier compressé peut être considérablement réduit, ce qui peut réduire considérablement le temps de chargement du navigateur.

Tels que: extract-text-webpack-plugin

Quatrièmement, supprimez les CSS inutiles

Bien que la compression de fichier puisse réduire la taille du fichier, la compression de fichier css ne supprime généralement que les espaces inutiles, ce qui limite le taux de compression des fichiers css. Si le fichier compressé dépasse toujours la taille attendue, vous pouvez essayer de trouver et de supprimer le CSS inutile dans le code.
Dans des circonstances normales, il y aura deux types de codes CSS inutiles:

• Dupliquer du code dans différents éléments ou dans d'autres situations,
• Il n'y a pas de code CSS efficace dans toute la page

Utilisation intelligente du mécanisme d'héritage css, si le nœud parent est défini, le nœud enfant n'a pas besoin d'être défini.

Cinq, utilisez les sélecteurs de manière sélective

L'appariement des sélecteurs CSS se fait de droite à gauche, ce qui conduit à des différences de performances entre les différents types de sélecteurs.

Plus de sélecteurs dans CSS ne correspondront pas, donc lors de l'examen des problèmes de performances, ce qui doit être considéré est comment améliorer l'efficacité lorsque les sélecteurs ne correspondent pas. La correspondance de droite à gauche est à cet effet.

Par rapport à #abc, évidemment lors de l'utilisation de #a .bc, le navigateur prend plus de temps pour générer l'arborescence de rendu. Parce que ce dernier a besoin de trouver tous les éléments c dans le DOM, puis de filtrer les éléments ancêtres qui ne sont pas .b, et enfin de filtrer les ancêtres de .b qui ne sont pas #a. Plus il y a de niveaux de nidification, plus cela prendra de temps.

1. N'utilisez pas de sélecteurs trop imbriqués ou trop complexes.
2. Les caractères génériques et les sélecteurs d'attributs sont les moins efficaces et doivent correspondre au plus grand nombre d'éléments, évitez donc de les utiliser autant que possible.
3. N'utilisez pas de sélecteurs de classe et d'ID pour décorer les balises d'élément, telles que h3 # markdown-content
   (l'ID est à l'origine unique et a une grande valeur d'autorisation. L'imbrication est un gaspillage de performances.)

Sixièmement, réduire l'utilisation d'attributs coûteux

Lorsque le navigateur dessine l'écran, toutes les propriétés qui doivent être manipulées ou calculées par le navigateur sont relativement coûteuses. Lorsque la page est redessinée, ils réduisent les performances de rendu du navigateur. Minimisez l'utilisation d'attributs coûteux, tels que box-shadow / border-radius / filter / transparent /: nth-child, etc.

7. Optimiser le réarrangement et le redessiner

1. Réduisez le réarrangement

Le réarrangement obligera le navigateur à recalculer l'ensemble du document et à reconstruire l'arborescence de rendu, ce qui réduira la vitesse de rendu du navigateur.

Opérations qui provoqueront un réarrangement:

• Ajouter ou supprimer des éléments DOM visibles
• Changement de position d'élément
• Changement de taille d'élément
• Le contenu de l'élément change (par exemple: un texte est remplacé par une autre image de taille différente)
• Initialisation du rendu de la page (cela ne peut pas être évité)
• La taille de la fenêtre du navigateur a été modifiée
• Activation de pseudo-classe CSS

Éléments de réarrangement courants:

1. Largeur, hauteur, remplissage, marge, largeur de la bordure, bordure, hauteur min.
2. Affichage lié à la mise en page, haut, position, flottant, gauche, droite, bas
3. Taille de la police, alignement du texte, épaisseur de la police, famille de la police, hauteur de la ligne, espace blanc, alignement vertical
4. Masquer le débordement associé, le débordement-x, le débordement-y

Procédez comme suit pour éviter la plupart des redistributions sur la page:

• Utilisez des positions absolues pour positionner les éléments animés sur la page afin de les sortir du flux de documents
• Laissez les éléments bouger. Lorsqu'il s'agrandit, il couvrira temporairement une partie de la page. Mais il ne s'agit que du processus de rafraîchissement d'une petite zone de la page, et il ne réorganisera pas et ne redessinera pas la majeure partie du contenu de la page.
• À la fin de l'animation, le positionnement est restauré, de sorte que les autres éléments du document ne seront déplacés vers le bas qu'une seule fois
• Lors de l'utilisation de Flex, le réarrangement est plus rapide que lors de l'utilisation de blocs en ligne et flottants, de sorte que Flex peut être prioritaire dans la mise en page.

2. Évitez les redessins inutiles

Lors de l'utilisation du site Web, le rafraîchissement est inévitable. Cependant, le navigateur a optimisé cela, il combinera plusieurs opérations de redistribution et de redessiner en une seule exécution. Cependant, nous devons toujours éviter les redessins inutiles, tels que l'événement de survol déclenché lors du défilement de la page, et l'événement de survol peut être désactivé lors du défilement, afin que la page soit plus fluide lors du défilement.

Lorsque l'apparence d'un élément (tel que la couleur, l'arrière-plan, la visibilité, etc.) change, cela déclenchera un rafraîchissement.

8. Rendre les éléments et leur contenu aussi indépendants que possible du reste de l'arborescence du document

L' attribut contain nous permet de spécifier un élément DOM spécifique et ses éléments enfants afin qu'ils puissent être indépendants de toute l'arborescence DOM. Le but est de permettre au navigateur d'avoir la possibilité de redessiner et de réorganiser uniquement une partie des éléments sans avoir à cibler la page entière à chaque fois. Autrement dit, permettre au navigateur de recalculer la mise en page, le style, la peinture, la taille ou toute combinaison de ceux-ci pour une zone limitée du DOM au lieu de la page entière.

En utilisation réelle, nous pouvons spécifier comment l'élément est indépendant de l'arborescence du document en définissant l'une des cinq valeurs suivantes à contenir:

• layout: Cette valeur signifie que la disposition interne de l'élément n'est affectée par aucune influence externe, et que l'élément et son contenu n'affecteront pas le niveau supérieur; les descendants du conteneur ne doivent pas faire en sorte que la disposition de l'élément en dehors du conteneur changer, et vice versa
• paint: Cette valeur indique que les enfants de l'élément ne peuvent pas être affichés en dehors de la portée de l'élément, et l'élément n'aura pas de débordement de contenu (ou même s'il déborde, il ne sera pas affiché); le contenu du conteneur sera ne jamais être dessiné au-delà de la taille du conteneur, si le conteneur est flou, alors le contenu ne sera pas dessiné du tout
• size: Cette valeur indique que la taille de la boîte d'élément est indépendante de son contenu, c'est-à-dire que ses éléments enfants seront ignorés lors du calcul de la taille de la boîte d'élément; lorsque son contenu change, le conteneur ne doit pas provoquer la position sur la page pour se déplacer
• content: Cette valeur est un raccourci pour contenir: layout paint
• strict: Cette valeur est un raccourci pour contenir: taille de la peinture de mise en page

Neuf, évitez d'utiliser @import

L'utilisation de @import pour introduire css affectera le téléchargement parallèle du navigateur. Le fichier css référencé par @import est téléchargé uniquement lorsque le fichier css qui y fait référence est téléchargé. Après l'analyse, le navigateur saura qu'il y a un autre css à télécharger, puis le télécharger, puis commencer l'analyse après le téléchargement, en créant l'arborescence de rendu , etc Une série d'opérations, qui empêche les navigateurs de télécharger en parallèle, l'utilisation de @import dans des fichiers css externes entraînera des retards supplémentaires lors du chargement de la page.
Il est préférable d'utiliser la balise de lien.

Dix, activez l'animation de rendu GPU

Le navigateur est optimisé pour gérer les animations CSS et les propriétés d'animation qui ne déclenchent pas bien la redistribution (et donc provoquent le dessin).

Afin d'améliorer les performances, le nœud animé peut être déplacé du thread principal vers le GPU. Les propriétés qui entraîneront la composition incluent les transformations 3D (transform: translateZ (), rotate3d (), etc.), l'animation, la transformation et l'opacité, la position: fixed, will-change et filter. Certains éléments, par exemple, et, sont également situés sur leurs couches respectives. Lors de la promotion d'éléments en couches (également appelée composition), les propriétés de transition d'animation seront effectuées dans le GPU, améliorant ainsi les performances, en particulier sur les appareils mobiles.

Onze, fusionner les fichiers css

Si la page charge 10 fichiers css, chaque fichier est de 1 ko, alors ce sera plus lent que de simplement charger un fichier css de 100 ko.

Référence: https://blog.csdn.net/weixin_38015898/article/details/107215259

Pour plus de solutions d'optimisation, voir: https://juejin.cn/post/6942661408181977118

Lien vers cet article: https://blog.csdn.net/qq_39903567/article/details/115262201