Comment améliorer les performances CSS

Méthode d'amélioration : 1. Écrivez le style dans le fichier css et référencez-le dans le head ; 2. N'utilisez pas "@import" 3. Évitez d'utiliser des sélecteurs complexes, moins il y a de niveaux, mieux c'est 4 ; . Rationalisez les fichiers de style de la page ; 5. Utilisez l'héritage CSS pour réduire la quantité de code ; 6. Utilisez les attributs flottants et de positionnement avec précaution ; 7. Standardisez les différents préfixes du navigateur, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Comment améliorer les performances CSS, en fonction des performances de chargement de la page et des performances du code CSS, les principales performances sont : Performances de chargement (en commençant principalement par la réduction de la taille du fichier, la réduction du chargement bloqué, et amélioration de la concurrence), Performances du sélecteur, Performances de rendu, Maintenabilité.

1. Essayez d'écrire le style dans un fichier CSS séparé et référencez-le dans l'élément head

(1) Le contenu et le style sont séparés, faciles à gérer et à maintenir

(2) Réduire la taille de la page

(3) Les fichiers CSS peuvent être mis en cache et réutilisés, réduisant ainsi les coûts de maintenance

2 Ne pas utiliser @import

Si. vous utilisez @import Si l'attribut est introduit dans CSS, lorsque l'utilisateur navigue sur une vitesse Internet lente, il verra une page sans styles, puis il pourra voir le style approprié au fur et à mesure du téléchargement du fichier CSS

3. Évitez d'utiliser des sélecteurs complexes, moins il y a de niveaux, mieux c'est

Il y a de plus en plus de modules dans le projet, et les fonctions deviennent de plus en plus complexes. Les sélecteurs CSS que nous écrivons auront plusieurs couches. à l'intérieur, devenant de plus en plus complexe. Il est recommandé que l'imbrication des sélecteurs ne dépasse pas trois niveaux. Un sélecteur concis peut non seulement réduire la taille du fichier CSS et améliorer les performances de chargement de la page, mais sera également plus efficace lorsque le navigateur l'analysera. Améliorez également l'efficacité du développement des développeurs et réduisez les coûts de développement.

4. Rationalisez les fichiers de style de la page et supprimez les styles inutilisés

(1) Les fichiers de style sont trop volumineux, ce qui affecte la vitesse de chargement

(2) Le Le navigateur effectuera une correspondance de style redondante qui affecte le temps de rendu.

Fusionner les fichiers CSS utilisés dans la page actuelle en fonction du CSS requis par la page actuelle. La fusion en un seul fichier présente un avantage : le fichier de style sera mis en cache par le navigateur et il n'est pas nécessaire de le télécharger. le fichier de style lors de la saisie d'autres pages.

5. Utilisez l'héritage CSS pour réduire la quantité de code

Nous savons que certains codes CSS peuvent être hérités si l'élément parent a déjà défini le style, l'élément enfant n'a pas besoin de le faire. définir le style C’est également un moyen éprouvé d’améliorer les performances.

6. Utilisez les attributs hautes performances avec prudence : flottant et positionnement

D'une part, les différentes règles de mise en page complexes du flottant sont destinées à être un algorithme de mise en page heuristique local ; Le navigateur demande beaucoup d'efforts pour le traiter. D’un autre côté, la disposition des éléments flottants implique bien d’autres facteurs. Dans le même espace de mise en page, tous les éléments flottants existent dans le « calque flottant » au-dessus du « calque statique ». Non seulement plusieurs éléments flottants du calque flottant s'affectent les uns les autres, mais les éléments flottants interagissent également avec le calque statique.

7. Préfixe de style CSS

Standardisez divers préfixes de navigateur, avec les préfixes de navigateur devant et les standards à l'arrière

8. 🎜>Lorsque la valeur de l'attribut est 0, aucune unité n'est ajoutée

Lorsque la valeur de l'attribut est un nombre à virgule flottante 0.**, le 0 avant la virgule décimale peut être omis

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!