CSS编写的网页打开流畅相关知识与注意点
发布时间：2020-06-17 07:04:19 所属栏目：系统 来源：站长网
导读：我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响，因此我们常常关注JavaScript是不是会占用客户端较多的资源，然而大部分都会忽略的一件有趣的事情，CSS也会对Web页面载入的效率产生影响。 我们罗列了十几条相关的知识与注意点，大家可以
|
我们都熟知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 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 （编辑：上饶站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
