相关栏目: 程序开发 当前位置:主页 > 程序开发 >

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

发布时间:2018-09-12 作者:admin 分类:程序开发

我们都熟知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

本文源自: 凯发国际_凯发国际开户礼金_凯发注册送_新浪娱乐

上一篇:靠我们自己的力量把IE6推向灭亡 下一篇:Node.js实战 建立简单的Web服务器

Copyright © 2005-2016 http://www.owlpma.com 凯发国际_凯发国际开户礼金_凯发注册送_新浪娱乐版权所有 凯发国际_凯发国际开户礼金_凯发注册送_新浪娱乐