8 conseils d'optimisation des performances CSS à connaître

Cet article vous présentera 8 conseils pour optimiser les performances CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Nous savons tous que les performances sont cruciales pour un site Web. En tant que partie importante du rendu des pages et de la présentation du contenu, CSS affecte la première expérience de l'utilisateur sur l'ensemble du site Web. Par conséquent, l’optimisation des performances qui y est associée ne peut être ignorée.

Nous n'envisageons souvent l'optimisation des performances que lorsque le projet est terminé. Elle est souvent reportée à la fin du projet, ou même lorsque de graves problèmes de performances sont révélés. Je pense que la plupart des gens en ont une profonde compréhension.

L'auteur estime que pour éviter cette situation, il faut d'abord prêter attention au travail lié à l'optimisation des performances et l'intégrer dans l'ensemble de la conception et du développement du produit. Deuxièmement, il s'agit de comprendre le contenu lié aux performances et d'effectuer naturellement une optimisation des performances pendant le processus de développement du projet. Enfin et surtout, commencez à optimiser dès maintenant.

Il est recommandé de lire l'article "Hé, je vais vous donner une carte d'optimisation des performances Web" 1 précédemment recommandé par Qiwu Weekly, qui peut vous aider à comprendre ce qui doit être fait et quoi les problèmes doivent être pris en compte pour l’optimisation des performances. Le concept global
.
Cet article présentera en détail les techniques liées à l'optimisation des performances CSS. L'auteur les divise en deux catégories : pratiques et suggérées, avec un total de 8 conseils. Les techniques pratiques peuvent être rapidement appliquées dans les projets et peuvent améliorer considérablement les performances. Elles sont également souvent utilisées par l'auteur. Il est recommandé à chacun de les mettre en pratique dans les projets dès que possible. Parmi les techniques suggérées, certaines peuvent ne pas avoir d'impact significatif sur les performances, et certaines peuvent ne pas être utilisées par tout le monde, je ne me concentrerai donc pas sur elles. Les lecteurs peuvent en apprendre davantage en fonction de leur propre situation. (Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Avant le démarrage officiel, vous devez avoir une certaine compréhension du principe de fonctionnement du navigateur 2. Les amis qui en ont besoin peuvent d'abord le comprendre brièvement .

Nous allons maintenant présenter 4 techniques d'optimisation pratiques, en commençant par la clé CSS sur le premier écran.

1. CSS critique du premier écran en ligne

Il existe un indicateur important dans l'optimisation des performances - Premier dessin efficace (Première peinture significative (FMP pour court) fait référence au moment où le contenu principal de la page apparaît à l’écran. Cet indicateur affecte le temps que les utilisateurs doivent attendre avant de voir la page, et le CSS critique en ligne (Critical CSS, qui peut être appelé critique CSS sur le premier écran) peut réduire ce temps.

Tout le monde devrait être habitué à référencer des fichiers CSS externes via la balise de lien. Mais ce que vous devez savoir, c'est que l'intégration du CSS directement dans le document HTML accélère le téléchargement du CSS. Lorsque vous utilisez des fichiers CSS externes, vous devez connaître les fichiers CSS à référencer après le téléchargement du document HTML, puis les télécharger. Par conséquent, CSS en ligne peut obliger le navigateur à commencer à afficher la page plus tôt, car elle peut être affichée une fois le téléchargement HTML terminé.

Étant donné que le CSS en ligne peut avancer l'heure de début du rendu de la page, tous les CSS peuvent-ils être intégrés ? La réponse est évidemment non, cette méthode n’est pas adaptée pour intégrer des fichiers CSS plus volumineux. Parce qu'il existe une limite sur la fenêtre de congestion initiale 3 (concept lié à TCP, généralement 14,6 Ko, taille compressée), si le fichier après le CSS en ligne dépasse cette limite, le système devra effectuer davantage de tours entre le serveur et le navigateur. voyage, cela n’avance pas le temps de rendu de la page. Par conséquent, nous devrions intégrer uniquement le CSS critique requis pour restituer le contenu au-dessus de la ligne de flottaison dans le HTML.

Maintenant que nous savons que l'insertion de la clé CSS au-dessus du premier écran peut optimiser les performances, l'étape suivante consiste à déterminer la clé CSS au-dessus du premier écran. De toute évidence, nous n’avons pas besoin de déterminer manuellement quel contenu se trouve au-dessus du CSS critique. Il existe un projet sur Github appelé Critical CSS4, qui peut extraire les styles clés appartenant au premier écran. Vous pouvez jeter un œil au projet et l'utiliser avec vos propres outils de construction. Bien entendu, afin de garantir l’exactitude, il est préférable que vous confirmiez personnellement si le contenu extrait est manquant.

Cependant, le CSS en ligne présente un inconvénient. Le CSS en ligne ne sera pas mis en cache et sera retéléchargé à chaque fois. Cependant, comme mentionné ci-dessus, si nous contrôlons la taille du fichier en ligne dans la limite de 14,6 Ko, cela ne semble pas être un gros problème.

Comme ci-dessus, nous avons expliqué pourquoi nous devons intégrer le CSS clé et comment l'intégrer. Alors, comment gérer le CSS restant ? Il est recommandé d'utiliser du CSS externe pour introduire le CSS restant, ce qui permet la mise en cache, en plus de les charger de manière asynchrone.

2. Le chargement asynchrone de CSS

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 que le CSS requis ne soit chargé. Ensuite, une fois le CSS clé du premier écran intégré, le blocage du rendu du contenu CSS restant n'est pas nécessaire. Le CSS externe peut être utilisé et chargé de manière asynchrone.

Alors, comment implémenter le chargement asynchrone de CSS ? Il existe quatre façons d'implémenter le chargement asynchrone de CSS
par le navigateur.
La première façon consiste à utiliser JavaScript pour créer dynamiquement un élément de lien de feuille de style et l'insérer 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 );

La deuxième méthode consiste à définir l'attribut media de l'élément de lien sur un type de média (ou une requête multimédia) auquel le navigateur de l'utilisateur ne correspond pas, tel que media="print ", voire un type media="noexist" totalement inexistant. Pour le navigateur, si la feuille de style n'est pas adaptée au type de média actuel, sa priorité sera diminuée et elle sera téléchargée sans bloquer le rendu des pages.

Bien sûr, ceci est uniquement pour obtenir un chargement asynchrone du CSS. N'oubliez pas de définir la valeur de media sur screen ou tout après le chargement du fichier, afin que le navigateur puisse commencer à analyser le CSS.

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media=&#39;all&#39;">

Semblable à la deuxième méthode, nous pouvons également marquer l'élément link comme feuille de style facultative alternative via l'attribut rel, qui peut également réaliser un chargement asynchrone par le navigateur. N’oubliez pas non plus de revenir en arrière une fois le chargement terminé.

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel=&#39;stylesheet&#39;">

Les trois méthodes ci-dessus sont relativement anciennes. Désormais, le standard Web rel="preload"5 indique comment charger des ressources de manière asynchrone, y compris des ressources de type CSS.

<link rel="preload" href="mystyles.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

Notez que tel que requis. Ignorer l'attribut as ou un attribut as incorrect rendra le préchargement équivalent à une requête XHR. Le navigateur ne sait pas quel contenu est chargé, la priorité de chargement de ces ressources sera donc très faible. Les valeurs facultatives de as peuvent faire référence aux documents standards ci-dessus.

Il semble que l'utilisation de rel="preload" ne soit pas différente des deux ci-dessus. Ils modifient tous deux certains attributs pour que le navigateur charge le fichier CSS de manière asynchrone mais ne l'analyse pas tant que le chargement n'est pas terminé et que le fichier CSS n'est pas analysé. les modifications sont restaurées. Ensuite, commencez l'analyse.

Mais il y a en fait une différence très importante entre eux, c'est-à-dire que l'utilisation du préchargement peut commencer à charger le CSS plus tôt que l'utilisation de la méthode multimédia inégalée. Par conséquent, même si la prise en charge de cette norme n’est pas encore complète, il est néanmoins recommandé d’utiliser cette méthode en premier.
Cette norme est désormais une norme candidate, et je pense que les navigateurs la prendront progressivement en charge. Les niveaux de support de chaque navigateur sont indiqués dans la figure ci-dessous.

3. Compression de fichiers

L'une des méthodes les plus simples et les plus couramment utilisées pour optimiser les performances est la compression de fichiers.
La taille du fichier affectera directement la vitesse de chargement du navigateur, ce qui est particulièrement évident lorsque le réseau est médiocre. Je pense que tout le monde est déjà habitué à compresser CSS. Les outils de construction actuels, tels que webpack, gulp/grunt, rollup, etc., prennent également en charge la fonction de compression CSS. Le fichier compressé peut être considérablement réduit, ce qui peut réduire considérablement le temps de chargement du navigateur.

4. Supprimez les CSS inutiles

Bien que la compression des fichiers puisse réduire la taille du fichier. Cependant, la compression des fichiers CSS ne supprime généralement que les espaces inutiles, ce qui limite le taux de compression des fichiers CSS. Existe-t-il d'autres moyens de rationaliser CSS ? La réponse est évidemment oui, si le fichier compressé dépasse toujours la taille attendue, on peut essayer de retrouver et supprimer le CSS inutile dans le code.

Généralement, il existe deux types de code CSS inutile : l'un est du code répété dans différents éléments ou dans d'autres situations, et l'autre est du code CSS qui ne prend pas effet sur toute la page. Pour le premier, lors de l’écriture du code, nous devons extraire autant que possible les classes publiques pour réduire la duplication. Pour ces derniers, lors du processus de maintenance du code par différents développeurs, le code CSS qui n'est plus utilisé sera toujours généré. Bien entendu, ce problème peut également survenir lorsqu'une seule personne l'écrit. Ces codes CSS inutiles augmenteront non seulement le volume de téléchargement du navigateur, mais augmenteront également le temps d'analyse du navigateur, ce qui représente une énorme perte de performances. Nous devons donc trouver et supprimer ces codes inutiles.

Bien sûr, il est très inefficace de supprimer manuellement ces CSS inutiles. Nous pouvons le faire avec l'aide de la bibliothèque Uncss7. Uncss peut être utilisé pour supprimer les CSS inutiles des feuilles de style et prend en charge les CSS multi-fichiers et injectés par JavaScript.

Nous avons déjà parlé des quatre techniques d'optimisation pratiques. Nous allons maintenant présenter les quatre techniques suggérées.

1. Utilisez les sélecteurs de manière sélective

La plupart des amis devraient savoir que la correspondance des sélecteurs CSS s'effectue de droite à gauche. Cette stratégie conduit également à des différences de performances entre les différents types. de sélecteurs. Par rapport à #markdown-content-h3, le navigateur prend évidemment plus de temps pour générer l'arbre de rendu lors de l'utilisation de #markdown .content h3. Car ce dernier doit d'abord trouver tous les éléments h3 dans le DOM, puis filtrer les éléments ancêtres qui ne sont pas des .content, et enfin filtrer les ancêtres de .content qui ne sont pas des #markdown. Imaginez, s'il y a plus de niveaux d'imbrication et plus d'éléments sur la page, le coût en temps de correspondance sera naturellement plus élevé.

Cependant, les navigateurs modernes ont fait de nombreuses optimisations sur cet aspect, et la différence de performances entre les différents sélecteurs n'est pas évidente, voire très différente. De plus, les performances des différents sélecteurs dans les différents navigateurs ne sont pas complètement uniformes et il est impossible de prendre en compte chaque navigateur lors de l'écriture du CSS. Compte tenu de ces deux raisons, lorsque nous utilisons le sélecteur, il suffit de retenir les points suivants, et le reste peut être entièrement basé sur les préférences.

• Restez simple et n'utilisez pas de sélecteurs trop complexes et trop imbriqués.

• Les caractères génériques et les sélecteurs d'attributs sont les moins efficaces et nécessitent le plus d'éléments correspondants, alors essayez d'éviter de les utiliser.

• N'utilisez pas de sélecteurs de classe et de sélecteurs d'ID pour modifier les balises d'éléments, telles que h3#markdown-content. Ceci est inutile et réduit l'efficacité.

• N'abandonnez pas la lisibilité et la maintenabilité en quête de vitesse.

Si vous avez encore des questions sur les points ci-dessus, l'auteur vous recommande de choisir l'une des méthodologies CSS suivantes (BEM9, OOCSS10, SUIT11, SMACSS12, ITCSS13, Enduring CSS14, etc. ) comme spécifications d'écriture CSS. L'utilisation d'une méthodologie unifiée peut aider tout le monde à adopter un style unifié, à réduire les conflits de noms et à éviter les problèmes ci-dessus. En bref, si vous ne l'avez pas encore utilisé, commencez à l'utiliser rapidement.

Conseils : Pourquoi les sélecteurs CSS correspondent-ils de droite à gauche ?

Plus de sélecteurs en CSS ne correspondront pas, donc lorsque l'on considère les problèmes de performances, ce qu'il faut considérer est de savoir comment améliorer l'efficacité lorsque les sélecteurs ne correspondent pas. La correspondance de droite à gauche permet d'atteindre cet objectif. Cette stratégie peut rendre le sélecteur CSS plus efficace lorsqu'il ne correspond pas. En y réfléchissant de cette façon, il est logique de consommer plus de performances lors de la correspondance.

2. Réduire l'utilisation d'attributs coûteux

Lorsque le navigateur dessine l'écran, tous les attributs qui nécessitent que le navigateur fonctionne ou calcule sont absolument nécessaires. plus. Lorsque les pages sont redessinées, elles réduisent les performances de rendu du navigateur. Ainsi, lors de l'écriture de CSS, nous devrions essayer de réduire l'utilisation de propriétés coûteuses, telles que box-shadow/border-radius/filter/transparency/:nth-child, etc.

Bien sûr, cela ne veut pas dire que tout le monde ne devrait pas utiliser ces attributs, car ce doivent être des attributs que nous utilisons souvent. La raison pour laquelle je mentionne cela est pour que tout le monde comprenne cela. Lorsqu'il y a deux options parmi lesquelles choisir, vous pouvez donner la priorité à l'option sans attributs coûteux ou avec des attributs moins coûteux. Si vous faites ce choix à chaque fois, les performances du site Web s'en trouveront inconsciemment améliorées.

3. Optimiser la redistribution et le redessinage

Lors de l'utilisation du site Web, certaines opérations entraîneront des changements de style, et le navigateur doit détecter ces changements et re-. rendu, dont certains coûtent plus cher en performances. Nous savons tous que lorsque le FPS est de 60, les utilisateurs se sentiront en douceur lorsqu'ils utiliseront le site Web. Cela signifie que nous devons terminer toutes les opérations liées à chaque rendu dans un délai de 16,67 ms, nous devons donc essayer de minimiser les opérations plus coûteuses.

3.1 Réduire la redistribution

La redistribution amènera le navigateur à recalculer l'intégralité du document et à reconstruire l'arborescence de rendu. Ce processus réduira la vitesse de rendu du navigateur. Comme indiqué ci-dessous, de nombreuses opérations déclenchent une réordonnancement, et nous devons éviter de déclencher ces opérations fréquemment.

• Modifier la taille de la police et la famille de polices

• Modifier les marges intérieures et extérieures de l'élément

• Changez la classe CSS via JS

• Obtenez les attributs liés à la position de l'élément DOM (tels que largeur/hauteur/gauche, etc.) via JS

• Pseudo-classe CSS Activez

• pour faire défiler la barre de défilement ou modifier la taille de la fenêtre

De plus, nous peut également demander quelles propriétés déclencheront la redistribution et le redessinage via CSS Trigger15 .

Il convient de mentionner que certaines propriétés CSS ont de meilleures performances de redistribution. Par exemple, lors de l'utilisation de Flex, la redistribution est plus rapide que lors de l'utilisation d'un bloc en ligne et d'un float, donc Flex peut avoir la priorité lors de la mise en page.

3.2 Évitez les redessinages inutiles

Lorsque l'apparence d'un élément (tel que la couleur, l'arrière-plan, la visibilité et d'autres attributs) change, le redessin sera déclenché. Lors de l’utilisation du site Internet, un redessinage est inévitable. Cependant, le navigateur a optimisé cela et fusionne plusieurs opérations de redistribution et de redessinage en une seule exécution. Cependant, nous devons toujours éviter les redessinements inutiles, tels que l'événement de survol déclenché lorsque la page défile. Vous pouvez désactiver l'événement de survol lors du défilement, afin que la page défile plus facilement.

De plus, nous écrivons de plus en plus de codes liés à l'animation en CSS, et nous sommes habitués à utiliser l'animation pour améliorer l'expérience utilisateur. Lorsque nous écrivons des animations, nous devons également nous référer au contenu ci-dessus pour réduire le déclenchement de redessins et de réarrangements. De plus, nous pouvons également améliorer les performances de l'animation grâce à l'accélération matérielle 16 et will-change17. Cet article ne présentera pas cela en détail. Les amis intéressés peuvent cliquer sur le lien pour le voir.

Enfin, il convient de noter que l'appareil de l'utilisateur n'est peut-être pas aussi performant qu'on l'imagine, du moins pas aussi performant que notre machine de développement. Nous pouvons utiliser les outils de développement de Chrome pour ralentir le processeur, puis effectuer les tests associés

Si vous devez y accéder côté mobile, il est préférable de réduire la limite de vitesse, car les performances du mobile le côté est souvent pire.

4. N'utilisez pas @import

Enfin, n'utilisez pas @import pour introduire CSS, je pense qu'il est rarement utilisé par tout le monde.

Il n'est pas recommandé d'utiliser @import principalement pour les deux raisons suivantes.

Tout d’abord, utiliser @import pour introduire CSS affectera le téléchargement parallèle du navigateur. Le fichier CSS référencé à l'aide de @import saura seulement qu'il existe un autre fichier CSS qui doit être téléchargé et analysé après le téléchargement du fichier CSS qui le référence. Il le téléchargera ensuite, puis commencera l'analyse, la création d'un arbre de rendu, etc. après le téléchargement. Cela empêche le navigateur de télécharger les fichiers de style requis en parallèle.

Deuxièmement, plusieurs @imports entraîneront un ordre de téléchargement désordonné. Dans IE, @import entraînera une perturbation de l'ordre de téléchargement des fichiers de ressources, c'est-à-dire que les fichiers js répertoriés derrière @import sont téléchargés avant @import et perturberont voire détruiront le téléchargement parallèle de @import lui-même.

Alors n’utilisez pas cette méthode, utilisez simplement la balise de lien.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!