Comment améliorer les performances CSS

Cet article présente principalement les méthodes d'optimisation des performances CSS pour améliorer les performances CSS. Les CSS non standard entraîneront de nombreux problèmes de performances, il est donc très nécessaire d'apprendre et de maîtriser les compétences d'optimisation des performances CSS. Amis intéressés par l'optimisation des performances CSS. les connaissances se rassemblent Apprenons

Un CSS irrégulier entraînera de nombreux problèmes de performances. Ces problèmes peuvent ne pas être assez évidents dans certains petits projets, mais ils deviendront apparents dans les grands projets.

Principe de correspondance CSS

Avant d'optimiser le CSS, nous devons comprendre comment fonctionne le CSS Nous savons tous que le CSS est composé de sélecteurs, constitués. d'attributs et de valeurs d'attribut.

On peut écrire une ligne de code comme celle-ci

//css   
.con .loulan1 p span{ display: block; }   
//html   
<p class="con">   
    <p class="loulan">   
        <p><span>文字</span></p>   
    </p>   
</p>

Ici, on définit le style de la balise span dans la balise p dans la classe loulan dans le con classe . J'en ai marre de le dire, encore moins de l'écrire. En fait, vous pouvez considérer le navigateur comme une personne, et cela gaspillera certainement les performances lors du rendu.

Et le principe de correspondance du CSS n'est pas de gauche à droite, mais de droite à gauche, c'est-à-dire que dans cette ligne de notre code, on retrouve d'abord tous les éléments span de la page pour former un. set, puis recherchez tous les éléments span pour voir combien de spans ont un élément parent qui est un élément p ou un élément parent dont l'élément parent est un élément p ou... Recherchez lentement et supprimez ceux dont l'élément parent n'est pas un élément p . Montez et recherchez pour voir combien d'éléments p il y a dans la collection. La classe de son élément parent est loulan... Le navigateur a dit : Je suis tellement fatigué...

En fait, le navigateur. recherche de droite à gauche. L’avantage est de filtrer le plus tôt possible certaines règles de style et éléments non pertinents. Et Firefox appelle cette méthode de recherche keyselector (requête par mot-clé). Le soi-disant mot-clé est la dernière règle (la plus à droite) des règles de style, et la clé ci-dessus est span. Le but initial est de filtrer le plus rapidement possible certaines règles de style non pertinentes. Ce qui nous manque ici, c'est couche après couche, couche après couche, sans s'arrêter. Donc, si je veux simplement définir le style d'un span, ne serait-il pas préférable d'ajouter une classe au span ? Quelqu’un se demande maintenant : est-il nécessaire d’ajouter une classe à chaque élément ? Ce n'est certainement pas nécessaire, mais nous devons comprendre comment le navigateur trouve les correspondances, puis les combiner avec la structure actuelle pour créer la méthode d'écriture la meilleure et la plus pratique.

//css 
.loulanSpan{ display: block; }   
//html 
<p class="con">   
    <p class="loulan">   
        <p><span class="loulanSpan">文字</span></p>   
    </p>   
</p>

poids du sélecteur CSS

Voici les poids du sélecteur de balise de classe ID CSS, c'est-à-dire leur priorité, plus le poids, plus la priorité est élevée

ID:100

Classe:10

Tag:1

Avec les deux ci-dessus Parlons en détail de la façon dont pour optimiser les CSS pour améliorer les performances

1. Réduisez l'imbrication CSS Il est préférable de ne pas imbriquer plus de trois couches. En général, les éléments au niveau du bloc plus les classes et les éléments en ligne à l'intérieur ne sont pas nécessaires. Lors de l'écriture de CSS, les classes au niveau du bloc définissent des balises en ligne. Cela réduit non seulement la taille du fichier CSS, mais réduit également le gaspillage de performances.

2. Ne pas emboîter devant le sélecteur d'ID. L'ID est intrinsèquement unique et le poids est si important. L'emboîtement devant est un gaspillage total de performances.

3. Créez une classe de style public et extrayez de longues sections du même style qu'une classe publique. Par exemple, nous utilisons couramment des flottants clairs, affichons des points de suspension lorsqu'une seule ligne dépasse la limite, etc. si vous utilisez sass, l'héritage vous le permettra. En même temps, je préconise l'utilisation de sass. J'écrirai certainement un blog sass à l'avenir.

4, abréviation css, y compris l'abréviation maigin, le remplissage, la valeur de couleur, etc. S'il y a deux ou plusieurs margin-****, écrivez margin : * * * *Taille du fichier d'aide.

5. Réduisez l'utilisation du caractère générique * ou des sélecteurs comme [hidden="true"] et recherchez tout... Cette performance est-elle bonne ? Bien sûr, les choses nécessaires comme la réinitialisation du style sont indispensables.

6. Certaines personnes aiment ajouter le nom de la balise : p.ty_p devant le nom de la classe pour un positionnement plus précis, mais cela est souvent moins efficace. Le nom de la classe doit être dans la portée globale à moins qu'il soit public. est unique, donc cette approche devrait être des nouilles instantanées.

7. Utilisez intelligemment le mécanisme d'héritage de CSS. De nombreux attributs en CSS peuvent être hérités, tels que la couleur, la police, etc. Une fois le nœud parent défini, les nœuds enfants n'ont pas besoin d'être définis.

8. Divisez le fichier CSS public. Pour les projets plus volumineux, nous pouvons extraire les styles de structure communs de la plupart des pages et les placer dans des fichiers CSS séparés, afin qu'ils puissent être placés dans le cache après un seul téléchargement. Bien sûr, cette approche augmentera les demandes et l'approche spécifique doit être déterminée en fonction de la situation réelle.

9. Il n'est pas nécessaire d'utiliser des expressions CSS. Vous y êtes peut-être moins exposé, mais ce que vous devez retenir, c'est que peu importe à quel point nous sommes cool, ce sera statique à la fin, donc les expressions sont juste des expressions. rendre votre code plus cool, mais son gaspillage de performances peut dépasser votre imagination, car il ne calcule pas qu'une seule fois, certains petits événements peuvent augmenter le nombre de calculs qu'il doit effectuer pour être efficace et précis.

10. Utilisez moins de repos CSS. Vous pensez peut-être que la réinitialisation du style est la norme, mais en fait, de nombreuses opérations sont inutiles et peu conviviales. Les amis qui en ont besoin et qui sont intéressés peuvent choisir normolize.css

11, cssSprite, synthétise toutes les images d'icônes et utilise l'image d'arrière-plan de largeur, hauteur et position du fond pour afficher l'image d'icône que nous voulons. C'est une technique très pratique qui réduit considérablement les requêtes http.

Bien sûr, nous avons encore besoin de quelques travaux ultérieurs, compression CSS (voici un compresseur YUI de compression en ligne, bien sûr vous utiliserez d'autres outils pour le compresser, c'est très bien), compression GZIP, Gzip est un algorithme de compression de fichiers populaire, détails Vous pouvez le rechercher sur Google ou Baidu.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Règles de remplacement du style CSS

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!