CSS编写的网页打开流畅相关知识与注意点

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设
  我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响,我们常常关注JavaScript是不是会占用客户端较多的资源,大部分都会忽略的一件有趣的事情,CSS也会对Web页面载入的效率产生影响。
  我们罗列了十几条相关的知识与注意点,大家可以系统的探讨一下,让我们编写的Web页面打开更加流畅。
  请不要告诉我,你看不懂E文,只是你不愿意看!!!
  1、Howthestylesystembreaksuprules
  Thestylesystembreaksrulesupintofourprimarycategories.Itiscriticaltounderstandthesecategories,astheyarethefirstlineofdefenseasfarasrulematchingisconcerned.Iusethetermkeyselectorintheparagraphsthatfollow.Thekeyselectorisdefinedtobetherightmostourrenceofanidselector,aclassselector,oratagselector.
  1.1、IDRules
  ThefirstcategoryconsistsofthoserulesthathaveanIDselectorastheirkeyselector.
button#backButton{}/ThisisanID-categorizedrule/
#urlBar[type="aulete"]{}/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.
  Yourfirstlineofdefenseistherulefilteringthatoursbasedonthetypeofthekeyselector.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、Tryutrulesintothemostspecifiategoryyoucan!
  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)forallourrencesofthatelement.
BAD-treehead>treerow>treecell{}
BEST-.treecell-header{}
  3.7、Questionallusagesofthechildselector!
  Becarefulaboutusingthechildselector.Ifyoucaneupwithawaytoavoidhavingtouseit,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,whenthisrulereallyshouldhaveendedupbeinginthemostspecifiategoryofall,theIDcategory.
  Remember,especiallywithanonymouscontent,thattheyallhavethesameclasses!Thebadruleabovecausestheiconofeverymenutobecheckedtoseeifitiscontainedinthebookmarksmenuitem.Thisishideouslyexpensive(sincetherearemanymenus);thisrulenevershouldhaveevenbeencheckedbyanymenuotherthanthebookmarksmenu.
  3.9、Use-moz-image-region!
  Puttingabunchofimagesintoasingleimagefileandselectingthemwith-moz-image-regionperformssignificantlybetterthanputtingeachimageintoitsownfile.
  OriginalDocumentInformation-Author:DavidHyatt

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by