Analyse et résumé de l'impact du CSS sur l'efficacité de chargement des pages Web_Experience Exchange

Nous avons répertorié plus d'une douzaine de points de connaissances et d'attention connexes. Vous pouvez en discuter systématiquement pour faciliter l'ouverture des pages Web que nous écrivons.
S'il vous plaît, ne me dites pas que vous ne savez pas lire le texte électronique, c'est juste que vous ne voulez pas le lire ! ! !

　　1、Comment le système de style divise les règles  
　　Le système de style divise les règles en quatre catégories principales. Il est essentiel de comprendre ces catégories, car elles constituent la première ligne de défense en ce que la correspondance aux règles est concernée. J'utilise le terme sélecteur de clé dans les paragraphes qui suivent. Le sélecteur de clé est défini comme être l'occurrence la droite d'un sélecteur d'identifiant, un sélecteur de classe ou un sélecteur de balise. 

　　1.1、Règles d'identification 
　　La première catégorie se compose de les règles qui ont un sélecteur d'identification comme leur sélecteur de clé. 

button#backButton { } /* Ceci est une règle catégorisée par ID */
#urlBar[type="autocomplete"] { } /* Ceci est une règle catégorisée par ID */
élément d'arbre > rangée d'arbres > treecell#myCell :active { } /* Il s'agit d'une règle catégorisée par ID */
　　1.2、Règles de classe 
Si une règle a une classe spécifiée comme sa sélecteur de clé, alors elle entre dans cette catégorie. 

button.toolbarButton { } /* Une règle basée sur les classes */
.fancyText { } /* Une règle basée sur les classes */
menuitem > .menu-left[checked="true"] { } /* Une règle basée sur les classes */
　　1.3、Tag Rules 
　　Si aucune classe ou ID n'est spécifié comme sélecteur de clé, alors la catégorie potentielle suivante pour une règle est la catégorie de balise. Si une règle comporte une balise spécifiée comme sélecteur de clé, alors la règle entre dans cette catégorie. 

td { } /* Une règle basée sur des balises */
treeitem > treerow { } /* Une règle basée sur des balises */
input[type="checkbox"] { } /* Une règle basée sur des balises */
　　1.4、Règles universelles 
　　Toutes les autres règles entrent dans ceci catégorie. 


:table { } /* Une règle universelle */
[hidden="true"] { } /* Une règle universelle */
* { } /* Une règle universelle */
arbre > [collapsed="true"] { } /* Une règle universelle */
　　2、Comment le système de style correspond aux règles 
　　Le système de style correspond à une règle en commençant par le sélecteur le le plus à droite et en se déplaçant vers la gauche à travers les sélecteurs de la règle. Tant que votre petit sous-arbre continue à être vérifié, le système de style continuera à se déplacer vers la gauche jusqu'à ce qu'il corresponde à la règle ou qu'il s'éteigne en raison d'une incompatibilité. 
　　Votre première ligne de défense est le filtrage des règles qui se produit en basé sur le type du sélecteur à clé. Le objectif de cette catégorisation est de filtrer les règles afin que vous n'ayez même pas à perdre du temps à essayer de les faire correspondre. C'est la clé pour augmenter considérablement les performances. Moins vous avez de règles à vérifier pour un élément donné, plus la résolution de style sera rapide. À par exemple, si votre élément a un ID, alors seules les règles d'ID qui correspondent à l'ID de votre élément seront vérifiées. Seules les règles de classe pour une classe trouvée sur votre élément seront vérifiées. Seules les règles de balise qui correspondent à votre balise seront vérifiées. Les règles universelles seront toujours vérifiées. 

　　3、Directives pour un CSS efficace 
　　3.1、Évitez les règles universelles ! 
　　Assurez-vous qu'une règle ne finit pas dans la catégorie universelle !

　　3.2、Ne qualifiez pas les règles catégorisées par ID avec des noms de balise ou des classes 
　　Si vous avez une règle de style qui a un sélecteur ID comme sélecteur de clé, ne vous embêtez pas également d'ajouter le nom de balise à la règle. Les identifiants sont uniques, vous ralentissez donc la mise en correspondance sans véritable raison. 

复制代码 代码如下 :

MAUVAIS - bouton#backButton { }  
MAUVAIS - .menu-left#newMenuIcon { }  
BON - #backButton { }  
BON - #newMenuIcon { }  

　　3.3、Ne pas qualifier class-categorized règles avec noms de tag 
　　Similaire à la règle ci-dessus, toutes nos classes seront uniques. La convention que vous devez utiliser consiste à inclure le nom de la balise dans le nom de la classe. 

复制代码 代码如下 :

MAUVAIS - treecell.indented { }  
BON - .treecell-indented { }  

　　3.4、Essayez de mettre les règles dans la catégorie la plus spécifique que possible ! 
　　La plus grande cause du ralentissement dans notre système est que nous avons trop de règles dans la catégorie de tag . En ajoutant des classes à nos éléments, nous pouvons subdiviser ces règles en catégories de classes, et nous ne perdons plus de temps à essayer de faire correspondre autant de règles pour une balise donnée. 


MAUVAIS - treeitem[mailfolder="true"] > rangée d'arbres > treecell { } 
BON - .treecell-mailfolder { } 
　　3.5、Évitez le sélecteur descendant ! 
　　Le sélecteur descendant est le sélecteur le le plus cher en CSS. C'est terriblement cher, surtout si une règle utilisant le sélecteur est dans la catégorie balise ou universelle. Souvent, ce qui est réellement souhaité, c'est le sélecteur d'enfants. L'utilisation du sélecteur descendant est interdite dans UI CSS sans l'approbation explicite du propriétaire du module de votre skin. 

MAUVAIS - treehead treerow treecell { } 
MIEUX, MAIS TOUJOURS MAUVAIS (voir la directive suivante) - treehead > rangée d'arbres > treecell { } 
　　3.6、Les règles catégorisées par balises ne doivent jamais contenir un sélecteur enfant ! 
　　Évitez d'utiliser le sélecteur d'enfants avec des règles catégorisées par tags. Vous augmenterez considérablement le temps de correspondance (surtout si la règle est susceptible d'être correspondée plus souvent qu'autrement) pour toutes les occurrences de ce élément. 


MAUVAIS - tête d'arbre > rangée d'arbres > treecell { } 
BEST - .treecell-header { } 
　　3.7、Remettez en question toutes les utilisations du sélecteur enfant ! 
　　Soyez prudent lorsque vous utilisez le sélecteur d'enfants. Si vous pouvez trouver un moyen d'éviter d'avoir à l'utiliser, faites-le. En particulier, le sélecteur enfant est fréquemment utilisé avec les arborescences RDF et les menus similaires. 


MAUVAIS - treeitem[IsImapServer="true"] > rangée d'arbres > .tree-folderpane-icon { } 
　　N'oubliez pas que les attributs de RDF peuvent être dupliqués dans un modèle ! Profitez de ce fait pour dupliquer les propriétés RDF sur les éléments XUL enfants qui souhaitent changer en fonction de cet attribut. 


BON - .tree-folderpane-icon[IsImapServer="true"] { } 
　　3.8、Fiez-vous à l'héritage ! 
　　Découvrez quelles propriétés héritent et permettez-leur de le faire ! Nous avons explicitement configuré un widgetry XUL afin que vous pouvez mettre une image de style de liste (juste un exemple) ou des règles de police sur la balise parent, et il filtrera dans le contenu anonyme. Vous n'avez pas à perdre du temps à écrire une règle qui s'adresse directement au contenu anonyme. 


MAUVAIS - #bookmarkMenuItem > .menu-left { list-style-image : url(blah); } 
BON - #bookmarkMenuItem { list-style-image : url(blah); } 
　　Dans l'exemple ci-dessus, le désir de styliser le contenu anonyme (sans comprendre que l'image-de-style-liste hérite) a abouti à une règle qui était dans la catégorie de classe, alors que cette règle aurait vraiment de fini par être dans la plus spécifique catégorie de toutes, la catégorie ID . 
　　N'oubliez pas, surtout avec le contenu anonyme, qu ils ont tous les mêmes cours ! La mauvaise règle ci-dessus entraîne la vérification de l'icône de chaque menu pour voir si elle est contenue dans l'élément de menu des favoris. C'est horriblement cher (car il existe de nombreux menus) ; cette règle n'aurait jamais dû être vérifiée par un menu autre que le menu de signets . 

　　3.9、Utilisez -moz-image-region ! 
　　Placer un groupe d'images dans un unique fichier image et les sélectionner avec -moz-image-region est beaucoup meilleur que mettre chaque image dans son propre fichier. 
　　Informations sur le document original － Auteur : David Hyatt