Analyse und Zusammenfassung der Auswirkungen von CSS auf die Effizienz beim Laden von Webseiten_Erfahrungsaustausch

Wir haben mehr als ein Dutzend verwandte Wissens- und Aufmerksamkeitspunkte aufgelistet. Sie können sie systematisch besprechen, um das Öffnen der von uns verfassten Webseiten reibungsloser zu gestalten.
Bitte sagen Sie mir nicht, dass Sie E-Text nicht lesen können, es ist nur so, dass Sie ihn nicht lesen wollen! ! !

　　1、Wie das Stilsystem Regeln aufteilt 
　　Das Stilsystem unterteilt Regeln in vier Hauptkategorien. Es ist von entscheidender Bedeutung, diese Kategorien zu verstehen, da sie die erste Verteidigungslinie darstellen, wenn es um den Regelabgleich geht. In den folgenden Absätzen verwende ich den Begriff „Schlüsselauswahl“. Der Schlüsselselektor ist als das ganz rechte Vorkommen eines ID-Selektors, eines Klassenselektors oder eines Tag-Selektors definiert. 

　　1.1、ID-Regeln 
　　Die erste Kategorie besteht aus den Regeln, die einen ID-Selektor als Schlüsselselektor haben. 

button#backButton { } /* Dies ist eine ID-kategorisierte Regel */
#urlBar[type="autocomplete"] { } /* Dies ist eine ID-kategorisierte Regel */
Baumelement > Baumreihe > treecell#myCell :active { } /* Dies ist eine ID-kategorisierte Regel */
　　1.2、Klassenregeln 
Wenn für eine Regel eine Klasse als Schlüsselselektor angegeben ist, fällt sie in diese Kategorie. 

button.toolbarButton { } /* Eine klassenbasierte Regel */
.fancyText { } /* Eine klassenbasierte Regel */
menuitem > .menu-left[checked="true"] { } /* Eine klassenbasierte Regel */
　　1.3、Tag-Regeln 
　　Wenn keine Klasse oder ID als Schlüsselauswahl angegeben ist, wird die nächste potenzielle Kategorie für verwendet Eine Regel ist die Tag-Kategorie. Wenn für eine Regel ein Tag als Schlüsselselektor angegeben ist, fällt die Regel in diese Kategorie. 

td { } /* Eine Tag-basierte Regel */
treeitem > treerow { } /* Eine Tag-basierte Regel */
input[type="checkbox"] { } /* Eine Tag-basierte Regel */
　　1.4、Universal Rules 
　　Alle anderen Regeln fallen hierauf Kategorie. 


:table { } /* Eine universelle Regel */
[hidden="true"] { } /* Eine universelle Regel */
* { } /* Eine universelle Regel */
Baum > [collapsed="true"] { } /* Eine universelle Regel */
　　2、Wie das Stilsystem mit Regeln übereinstimmt 
　　Das Stilsystem stimmt mit einer Regel überein, indem es mit dem Selektor ganz rechts beginnt und sich dann nach links durch die Selektoren der Regel bewegt. Solange Ihr kleiner Teilbaum weiterhin ausgecheckt wird, bewegt sich das Stilsystem weiter nach links, bis es entweder der Regel entspricht oder wegen einer Nichtübereinstimmung aussteigt. 
　　Ihre erste Verteidigungslinie ist die Regelfilterung, die auf der Grundlage der Art des Schlüsselselektors erfolgt. Der Zweck dieser Kategorisierung besteht darin, Regeln herauszufiltern, sodass Sie nicht einmal Zeit damit verschwenden müssen, sie zuzuordnen. Dies ist der Schlüssel zu einer drastischen Leistungssteigerung. Je weniger Regeln Sie für ein bestimmtes Element überprüfen müssen, desto schneller wird die Stilauflösung erfolgen. Wenn Ihr Element beispielsweise eine ID hat, werden nur ID-Regeln überprüft, die mit der ID Ihres Elements übereinstimmen. Es werden nur Klassenregeln für eine in Ihrem Element gefundene Klasse überprüft. Es werden nur Tag-Regeln überprüft, die mit Ihrem Tag übereinstimmen. Universelle Regeln werden immer überprüft. 

　　3、Richtlinien für effizientes CSS 
　　3.1、Vermeiden Sie universelle Regeln! 
　　Stellen Sie sicher, dass eine Regel nicht in der Kategorie „Allgemein“ landet!

　　3.2、Qualifizieren Sie ID-kategorisierte Regeln nicht mit Tag-Namen oder Klassen.
　　Wenn Sie eine Stilregel haben, die einen ID-Selektor als Schlüsselselektor hat, machen Sie sich nicht die Mühe, auch den Tag-Namen hinzuzufügen die Regel. Da IDs eindeutig sind, verlangsamen Sie den Abgleich ohne wirklichen Grund. 

复制代码 代码如下:

BAD - button#backButton { }  
SCHLECHT - .menu-left#newMenuIcon { }  
GUT - #backButton { }  
GUT - #newMenuIcon { }  

　　3.3、Nicht klassenkategorisiert qualifizieren Regeln mit Tag-Namen 
　　Ähnlich zur Regel oben werden alle unsere Klassen eindeutig sein. Die Konvention, die Sie verwenden sollten, besteht darin, den Tag-Namen in den Klassennamen aufzunehmen. 

复制代码 代码如下:

BAD - treecell.indented { }  
GUT - .treecell-indented { }  

　　3.4、Versuchen Sie, Regeln in eine möglichst spezifische Kategorie einzuordnen! 
　　Die größte Ursache für die Verlangsamung unseres Systems ist, dass wir zu viele Regeln in der Tag-Kategorie haben. Durch das Hinzufügen von Klassen zu unseren Elementen können wir diese Regeln weiter in Klassenkategorien unterteilen und verschwenden dann keine Zeit mehr damit, möglichst viele Regeln für ein bestimmtes Tag zuzuordnen. 


SCHLECHT - treeitem[mailfolder="true"] > Baumreihe > treecell { } 
GUT - .treecell-mailfolder { } 
　　3.5、Vermeiden Sie den Nachkommen-Selektor! 
　　Der Descendent-Selektor ist der teuerste Selektor in CSS. Es ist furchtbar teuer, insbesondere wenn eine Regel, die den Selektor verwendet, in der Kategorie „Tag“ oder „Universal“ liegt. Oftmals ist die Kinderauswahl wirklich erwünscht. Die Verwendung des Descendent-Selektors ist im UI-CSS ohne die ausdrückliche Genehmigung des Modulbesitzers Ihres Skins verboten. 

SCHLECHT - treehead treerow treecell { } 
BESSER, ABER immer noch schlecht (siehe nächste Richtlinie) - treehead > Baumreihe > treecell { } 
　　3.6、Tag-kategorisierte Regeln sollten niemals einen untergeordneten Selektor enthalten! 
　　Vermeiden Sie die Verwendung der Kinderauswahl mit nach Tags kategorisierten Regeln. Sie werden die Übereinstimmungszeit für alle Vorkommen dieses Elements erheblich verlängern (vor allem, wenn die Regel wahrscheinlich häufiger erfüllt wird). 


SCHLECHT - treehead > Baumreihe > treecell { } 
BEST - .treecell-header { } 
　　3.7、Stellen Sie alle Verwendungen des untergeordneten Selektors in Frage! 
　　Seien Sie bei der Verwendung der Kinderauswahl vorsichtig. Wenn Sie eine Möglichkeit finden, die Verwendung zu vermeiden, tun Sie dies. Insbesondere wird der untergeordnete Selektor häufig mit RDF-Bäumen und ähnlichen Menüs verwendet. 


SCHLECHT - treeitem[IsImapServer="true"] > Baumreihe > .tree-folderpane-icon { } 
　　Denken Sie daran, dass Attribute aus RDF in einer Vorlage dupliziert werden können! Nutzen Sie diese Tatsache, um RDF-Eigenschaften auf untergeordneten XUL-Elementen zu duplizieren, die sich basierend auf diesem Attribut ändern möchten. 


GUT - .tree-folderpane-icon[IsImapServer="true"] { } 
　　3.8、Verlassen Sie sich auf die Vererbung! 
　　Erfahren Sie, welche Eigenschaften erben, und ermöglichen Sie ihnen, dies zu tun! Wir haben XUL-Widgetry ausdrücklich so eingerichtet, dass Sie ein Bild im Listenstil (nur ein Beispiel) oder Schriftartregeln in das übergeordnete Tag einfügen können, und es wird nach dem anonymen Inhalt gefiltert. Sie müssen keine Zeit damit verschwenden, eine Regel zu schreiben, die sich direkt auf den anonymen Inhalt bezieht. 


SCHLECHT - #bookmarkMenuItem > .menu-left { list-style-image: url(blah); } 
GUT - #bookmarkMenuItem { list-style-image: url(blah); } 
　　Im obigen Beispiel führte der Wunsch, den anonymen Inhalt zu formatieren (ohne zu verstehen, dass list-style-image erbt), zu einer Regel, die in der Klassenkategorie lag, obwohl diese Regel eigentlich am spezifischsten hätte sein sollen Kategorie von allen, die ID-Kategorie. 
　　Denken Sie insbesondere bei anonymen Inhalten daran, dass sie alle dieselben Klassen haben! Die obige schlechte Regel führt dazu, dass das Symbol jedes Menüs überprüft wird, um festzustellen, ob es im Menüelement „Lesezeichen“ enthalten ist. Das ist furchtbar teuer (da es viele Menüs gibt); Diese Regel hätte niemals von einem anderen Menü als dem Lesezeichenmenü überprüft werden dürfen. 

　　3.9、Verwenden Sie -moz-image-region! 
　　Das Einfügen einer Reihe von Bildern in eine einzelne Bilddatei und deren Auswahl mit -moz-image-region führt zu einer deutlich besseren Leistung als das Einfügen jedes Bilds in eine eigene Datei. 
　　Informationen zum Originaldokument － Autor: David Hyatt