optimisation CSS, quelles sont les méthodes pour améliorer les performances

Méthode : 1. Compresser le CSS pour réduire la taille du fichier ; 2. Utiliser le lien pour importer des fichiers CSS ; 3. Concevoir la mise en page CSS de manière rationnelle, faire attention à la réutilisation des styles et réduire le temps consacré au rendu ; less "* "sélecteur ; 5. Utilisez les attributs hautes performances tels que le flottement et le positionnement avec prudence ; 6. Minimisez les réarrangements et les redessins de page 7. Lorsque la valeur de l'attribut est 0, n'ajoutez pas d'unités, etc.

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

L'optimisation CSS se concentre principalement sur 4 aspects :

• Performances de chargement

  Principalement en réduisant la taille des fichiers et en réduisant le chargement bloqué, commencez par améliorer la concurrence

• performances du sélecteur

• performances de rendu

• maintenabilité, robustesse

Laissez-moi vous donner une introduction détaillée ci-dessous.

Performances de chargement :

1. Compression CSS : L'emballage et la compression du CSS écrit peuvent réduire considérablement le volume ; >

2. Style CSS unique : Lorsque les marges inférieure et gauche sont requises,

est souvent choisi :

margin: top 0 bottom 0;

mais

est plus efficace dans l'exécution ;margin-bottom: bottom;margin-left: left;3. Réduisez l'utilisation de @import, et il est recommandé d'utiliser le lien, car ce dernier est chargé ensemble lorsque la page est chargée, et le premier attend que la page soit chargée avant de se charger

4. Conception raisonnable Pour la mise en page CSS, faites attention à la réutilisation des styles pour réduire le temps consacré au rendu. Lors du choix des classes et des ID, utilisez moins de correspondance globale telle que * et définissez les styles de base de manière appropriée (comme la définition de table{}) pour améliorer la réutilisation.

Performances des sélecteurs :

Les sélecteurs CSS correspondent de droite à gauche. Lors de l'utilisation du sélecteur descendant, le navigateur parcourra tous les éléments enfants pour déterminer s'il s'agit de l'élément spécifié, etc.

**Évitez d'utiliser des règles génériques**

Par exemple, *{} a un nombre incroyable de calculs ! Sélectionnez uniquement les éléments que vous devez utiliser

** Essayez de sélectionner le moins de balises possible, mais utilisez la classe**

telle que : #nav li{ } , vous pouvez ajouter le nom de classe de nav_item à li, sélectionnez .nav_item{}

**N'utilisez pas de balises pour limiter l'ID ou le sélecteur de classe**

Par exemple : ul#nav, doit être simplifié en #nav

**Utilisez le moins possible les sélecteurs descendants et réduisez la valeur de poids du sélecteur**

Sélection descendante La surcharge du sélecteur est la plus élevée. Essayez de réduire la profondeur du sélecteur au minimum. Le maximum ne doit pas dépasser trois niveaux pour associer chaque élément de balise

**. Envisagez l'héritage**

Comprenez quels attributs peuvent être hérités, puis évitez de spécifier à plusieurs reprises des règles pour ces attributs

Performances de rendu :

1. Utilisez soigneusement les attributs hautes performances : flottant et positionnement ;

2. Réduisez au minimum le réarrangement et le redessinage des pages ;

Réorganisez selon l'ordre d'écriture du CSS :

Position : position, haut, gauche, z-index, float, display

• Taille : largeur, hauteur, marge, rembourrage

• Série de texte : police, hauteur de ligne, couleur, espacement des lettres

• Bordure d'arrière-plan : arrière-plan, bordure

• Autres : anmation, transition

• Redessiner : bordure, contour, arrière-plan, ombre de boîte, si vous pouvez utiliser la couleur d'arrière-plan, essayez de ne pas utiliser d'arrière-plan ;

• (Partage vidéo d'apprentissage :
tutoriel vidéo CSS

)

3. Supprimez les règles vides :

4. 0, non Ajouter une unité ;

5. La valeur de l'attribut est un 0 décimal flottant.**, vous pouvez omettre le 0 avant la virgule décimale

6. avec les préfixes du navigateur viennent en premier. Les attributs standard viennent en dernier ;

7. N'utilisez pas le préfixe @import, qui affectera la vitesse de chargement du CSS

8. Utilisez pleinement les attributs d'héritage CSS pour réduire la quantité de CSS ; code ;

9. Extrayez de manière abstraite les styles courants pour réduire la quantité de code ;

10. Optimisez l'imbrication des sélecteurs et essayez d'éviter les niveaux trop profonds ; images de sprite, petites parties similaires de la même page. Les icônes sont pratiques à utiliser et réduisent le nombre de demandes de page, mais en même temps, l'image elle-même deviendra plus grande. Lorsque vous l'utilisez, réfléchissez attentivement aux avantages et aux inconvénients avant de l'utiliser ;

12. Placer le fichier css en haut de la page

Maintenabilité et robustesse :

1. les mêmes attributs, les intégrer et les utiliser dans la page à travers des classes pour améliorer la maintenabilité des CSS 2. Suite au précédent, oocss est également l'un des moyens d'améliorer les performances des CSS en définissant le réutilisable. et des classes de base sémantiquement bonnes, puis en les ajoutant au HTML, c'est aussi une méthode utilisée par de nombreux frameworks d'interface utilisateur, par exemple : class="btn btn-active btn-blue"

3. Séparation des styles; et contenu : définir le code CSS en CSS externe ;

4. Séparation des conteneurs et des styles

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de 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!