我们都熟知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、ClassRulesIfarulehasaclassspecifiedasitskeyselector,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　　3.1、AvoidUniversalRules!　　Makesurearuledoesn'tendupintheuniversalcategory!　　3.2、Don'tqualifyID-categorizedruleswithtagnamesorclasses　　IfyouhaveastylerulethathasanIDselectorasitskeyselector,don'tbotheralsoaddingthetagnametotherule.IDsareunique,soyou'reslowingdownthematchingfornorealreason. BAD-button#backButton{}BAD-.menu-left#newMenuIcon{}GOOD-#backButton{}GOOD-#newMenuIcon{} 　　3.3、Don'tqualifyclass-categorizedruleswithtagnames　　Similartotheruleabove,allofourclasseswillbeunique.Theconventionyoushoulduseistoincludethetagnameintheclassname. BAD-treecell.indented{}GOOD-.treecell-indented{} 　　3.4、Trytoputrulesintothemostspecificcategoryyoucan!　　Thesinglebiggestcauseofslowdowninoursystemisthatwehavetoomanyrulesinthetagcategory.Byaddingclassestoourelements,wecanfurthersubdividetheserulesintoclasscategories,andthenwenolongerwastetimetryingtomatchasmanyrulesforagiventag. BAD-treeitem[mailfolder="true"]>treerow>treecell{}GOOD-.treecell-mailfolder{} 　　3.5、Avoidthedescendantselector!　　ThedescendantselectoristhemostexpensiveselectorinCSS.Itisdreadfullyexpensive,especiallyifaruleusingtheselectorisinthetagoruniversalcategory.Frequentlywhatisreallydesiredisthechildselector.TheuseofthedescendantselectorisbannedinUICSSwithouttheexplicitapprovalofyourskin'smoduleowner. BAD-treeheadtreerowtreecell{}BETTER,BUTSTILLBAD(seenextguideline)-treehead>treerow>treecell{} 　　3.6、Tag-categorizedrulesshouldnevercontainachildselector!　　Avoidusingthechildselectorwithtag-categorizedrules.Youwilldramaticallyincreasethematchingtime(especiallyiftheruleislikelytobematchedmoreoftenthannot)foralloccurrencesofthatelement. BAD-treehead>treerow>treecell{}BEST-.treecell-header{} 　　3.7、Questionallusagesofthechildselector!　　Becarefulaboutusingthechildselector.Ifyoucancomeupwithawaytoavoidhavingtouseit,doso.Inparticular,thechildselectorisfrequentlyusedwithRDFtreesandmenuslikeso. BAD-treeitem[IsImapServer="true"]>treerow>.tree-folderpane-icon{} 　　RememberthatattributesfromRDFcanbeduplicatedinatemplate!TakeadvantageofthisfacttoduplicateRDFpropertiesonchildXULelementsthatwishtochangebasedoffthatattribute. GOOD-.tree-folderpane-icon[IsImapServer="true"]{} 　　3.8、Relyoninheritance!　　Learnwhichpropertiesinherit,andallowthemtodoso!WehaveexplicitlysetupXULwidgetrysothatyoucanputlist-style-image(justoneexample)orfontrulesontheparenttag,anditwillfilterintotheanonymouscontent.Youdon'thavetowastetimewritingarulethattalksdirectlytotheanonymouscontent. BAD-#bookmarkMenuItem>.menu-left{list-style-image:url(blah);}GOOD-#bookmarkMenuItem{list-style-image:url(blah);} 　　Intheaboveexample,thedesiretostyletheanonymouscontent(withoutunderstandingthatlist-style-imageinherits)resultedinarulethatwasintheclasscategory,whenthisrulereallyshouldhaveendedupbeinginthemostspecificcategoryofall,theIDcategory.　　Remember,especiallywithanonymouscontent,thattheyallhavethesameclasses!Thebadruleabovecausestheiconofeverymenutobecheckedtoseeifitiscontainedinthebookmarksmenuitem.Thisishideouslyexpensive(sincetherearemanymenus);thisrulenevershouldhaveevenbeencheckedbyanymenuotherthanthebookmarksmenu.　　3.9、Use-moz-image-region!　　Puttingabunchofimagesintoasingleimagefileandselectingthemwith-moz-image-regionperformssignificantlybetterthanputtingeachimageintoitsownfile.　　OriginalDocumentInformation－Author:DavidHyatt

　　推荐阅读

　　CSS教程：行高line-height属性(1)

相关文章：CSS教程：行高line-height属性（2） 行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因>>>详细阅读

本文标题：CSS编写的网页打开流畅相关知识与注意点

地址：http://www.17bianji.com/kaifa2/CSS/17371.html

 1/2    1