我們都熟知JavaScript可能會對Web頁面的加載與顯示產生較大的影響，因此我們常常關注JavaScript是不是會占用客戶端較多的資源，然而大部分都會忽略的一件有趣的事情，CSS也會對Web頁面載入的效率產生影響。
　　我們羅列了十幾條相關的知識與注意點，大家可以系統的探討一下，讓我們編寫的Web頁面打開更加流暢。
　　請不要告訴我，你看不懂E文，只是你不愿意看！！！
　　1、Howthestylesystembreaksuprules
　　Thestylesystembreaksrulesupintofourprimarycategories.Itiscriticaltounderstandthesecategories,astheyarethefirstlineofdefenseasfarasrulematchingisconcerned.Iusethetermkeyselectorintheparagraphsthatfollow.Thekeyselectorisdefinedtobetherightmostoccurrenceofanidselector,aclassselector,oratagselector.
　　1.1、IDRules
　　ThefirstcategoryconsistsofthoserulesthathaveanIDselectorastheirkeyselector.

button#backButton{}/*ThisisanID-categorizedrule*/
#urlBar[type="autocomplete"]{}/*ThisisanID-categorizedrule*/
treeitem>treerow>treecell#myCell:active{}/*ThisisanID-categorizedrule*/

　　1.2、ClassRules
Ifarulehasaclassspecifiedasitskeyselector,thenitfallsintothiscategory.

button.toolbarButton{}/*Aclass-basedrule*/
.fancyText{}/*Aclass-basedrule*/
menuitem>.menu-left[checked="true"]{}/*Aclass-basedrule*/

　　1.3、TagRules
　　IfnoclassorIDisspecifiedasthekeyselector,thenthenextpotentialcategoryforaruleisthetagcategory.Ifarulehasatagspecifiedasitskeyselector,thentherulefallsintothiscategory.

td{}/*Atag-basedrule*/
treeitem>treerow{}/*Atag-basedrule*/
input[type="checkbox"]{}/*Atag-basedrule*/

　　1.4、UniversalRules
　　Allotherrulesfallintothiscategory.

:table{}/*Auniversalrule*/
[hidden="true"]{}/*Auniversalrule*/
*{}/*Auniversalrule*/
tree>[collapsed="true"]{}/*Auniversalrule*/

　　2、HowtheStyleSystemMatchesRules
　　Thestylesystemmatchesarulebystartingwiththerightmostselectorandmovingtotheleftthroughtherule’sselectors.Aslongasyourlittlesubtreecontinuestocheckout,thestylesystemwillcontinuemovingtotheleftuntiliteithermatchestheruleorbailsoutbecauseofamismatch.
　　Yourfirstlineofdefenseistherulefilteringthatoccursbasedonthetypeofthekeyselector.Thepurposeofthiscategorizationistofilteroutrulessothatyoudon’tevenhavetowastetimetryingtomatchthem.Thisisthekeytodramaticallyincreasingperformance.Thefewerrulesthatyouevenhavetocheckforagivenelement,thefasterstyleresolutionwillbe.Asanexample,ifyourelementhasanID,thenonlyIDrulesthatmatchyourelement’sIDwillbechecked.Onlyclassrulesforaclassfoundonyourelementwillbechecked.Onlytagrulesthatmatchyourtagwillbechecked.Universalruleswillalwaysbechecked.
　　3、GuidelinesforEfficientCSS