怎樣建設(shè)高性能的網(wǎng)站品牌網(wǎng)絡(luò)營銷推薦課件

HighperformanceWebSitesrichardchang騰訊技術(shù)大講堂不知大家有沒有看過這個ppt以及這個架構(gòu)圖ExceptionalPerformancestartedin2004quantifyandimprovetheperformanceofallYahoo!productsworldwidecenterofexpertisebuildtools,analyzedatagather,research,andevangelizebestpracticesScopeperformancebreaksintotwocategoriesresponsetimeefficiencycurrentfocusisresponsetimeofwebproductsTheImportanceofFront-EndPerformanceThePerformanceGoldenRule80-90%oftheend-userresponsetimeisspentonthefront-end.Startthere.GreaterpotentialforimprovementSimplerProventoworkPerformanceResearch1userrequests2userrequestsotherwebpages3userre-requestsEmptyvs.FullCache1userrequests2userrequestsotherwebpages3userre-requestsEmptyvs.FullCachewithanemptycache1userrequests2userrequestsotherwebpages3userre-requestsEmptyvs.FullCacheEmptyvs.FullCache emptycache 2.4seconds fullcache 0.9seconds83%fewerbytes90%fewerHTTPrequestsHowmuchdoesthisbenefitourusers?Itdependsonhowmanyusershavecomponentsincache.Whatpercentageofusersviewapagewithanemptycache*?

*“Emptycache”meansthebrowserhastorequestthecomponents

insteadofpullingthemfromthebrowserdiskcache.Whatpercentageofpageviews

aredonewithanemptycache*?BrowserCacheExperimentRequestsfromthebrowserwillhaveoneoftheseresponsestatuscodes:

200–Thebrowserdoesnothavetheimage

initscache.304–Thebrowserhastheimageinitscache,

butneedstoverifythelastmodifieddate.BrowserCacheExperimentWhatpercentageofusersviewwithanemptycache?#uniqueuserswithatleastone200responsetotal#uniqueusersWhatpercentageofpageviewsaredonewithanemptycache?total#of200responses#of200+#of304responses}1pxSurprisingResultspageviewswith

emptycache40-60%~20%userswith

emptycache1userrequestsHTTPQuickReviewHTTPresponseheadersentbythewebserver:HTTP/1.1200OKContent-Type:text/html;charset=utf-8Set-Cookie:C=abcdefghijklmnopqrstuvwxyz;domain=.1userrequests4userrequestsHTTPQuickReviewHTTPrequestheadersentbythebrowser:GET/HTTP/1.1Host:User-Agent:Mozilla/4.0(compatible;MSIE6.0;…

Cookie:C=abcdefghijklmnopqrstuvwxyz;1userrequests5userrequestsHTTPQuickReviewHTTPrequestheadersentbythebrowser:GET/HTTP/1.1Host:User-Agent:Mozilla/4.0(compatible;MSIE6.0;…

Cookie:C=abcdefghijklmnopqrstuvwxyz;ImpactofCookiesonResponseTime80msdelaydialupusersCookieSizeTimeDelta0bytes78ms0ms500bytes79ms+1ms1000bytes94ms+16ms1500bytes109ms+31ms2000bytes125ms+47ms2500bytes141ms+63ms3000bytes156ms+78mskeepsizeslow.cookiesizesAnalysisofCookieSizesacrosstheWebTotalCookieSizeAmazon60bytesGoogle72bytesYahoo122bytesCNN184bytesYouTube218bytesMSN268byteseBay331bytesMySpace500bytesExperimentTakeawayseliminateunnecessarycookieskeepcookiesizeslowsetcookiesatappropriatedomainlevel,orhostingassetsonanewdomainsetExpiresdateappropriatelyearlierdateornoneremovescookiesooner ParallelDownloadsTwocomponentsinparallelperhostnameGIFGIFGIFGIFGIFGIFHTTP/1.1ParallelDownloadsTwoinparallelFourinparallelEightinparallelMaximizingParallelDownloadsresponsetime(seconds)aliasesMaximizingParallelDownloadsresponsetime(seconds)aliasesMaximizingParallelDownloadsresponsetime(seconds)aliasesMaximizingParallelDownloadsresponsetime(seconds)ruleofthumb:useatleasttwobutnomorethanfouraliasesExperimentTakeawaysconsidertheeffectsofCPUthrashingDNSlookuptimesvaryacrossISPsandgeographiclocationsdomainnamesmaynotbecached14RulesHowtooptimize?basicoptimizationrulesoptimizingassets(images,scripts,andstyles)optimizationsspecifictoscriptsoptimizationsspecifictostylesBasicRulesDecreaseDownloadSizesMakeFewerHTTPRequestsCombinescriptsandstylesheetsUseimagespritesAvoidredirectsAvoidframes14thingstocheckMakefewerHTTPrequestsUseaCDNAddanExpiresheaderGzipcomponentsPutCSSatthetopMoveJStothebottomAvoidCSSexpressionsMakeJSandCSSexternalReduceDNSlookupsMinifyJSAvoidredirectsRemoveduplicatescriptsTurnoffETagsMakeAJAXcacheableandsmallRule1:MakefewerHTTPrequestsimagemapsCSSspritesinlineimagescombinedscripts,combinedstylesheetsImagemapsserver-side<ahref="navbar.cgi"><imgismapsrc="imagemap.gif"></a>→client-side–preferred<imgusemap="#map1"border=0src="/images/imagemap.gif"><mapname="map1"><areashape="rect"coords="0,0,31,31"href="home.html"title="Home">…</map>drawbacks:mustbecontiguousdefiningareacoordinates–tedious,errorsCSSSprites–PreferredsizeofcombinedimageislessCSSSpritesGenerator-

#rss{background-image:url(sprite.png);background-position:-8px-40px;width:16px;height:16px;}CombinedScripts,

CombinedStylesheetsScriptsStylesheets3118111272119122314173Average6.51.5CombinedScripts,

CombinedStylesheetscombiningsixscriptsintooneeliminatesfiveHTTPrequestschallenges:developasseparatemodulesnumberofpossiblecombinationsvs.loadingmorethanneededmaximizebrowsercacheonesolution:dynamicallycombineandcacheRule2:UseaCDNdistributeyourstaticcontentbeforedistributingyourdynamiccontentAkamaiAkamaiAkamai,MirrorImageSAVVISAkamai,LimelightAkamaiRule3:AddanExpiresheadernotjustforimagesImagesStylesheetsScripts%MedianAge0/620/10/30%114days23/431/16/1848%217days0/1380/22/111%227days16/200/20/755%140days1/230/10/14%454days32/351/13/980%34days0/180/20/20%1day6/81/12/375%1day23/231/14/4100%n/a0/320/30/70%26daysSettingExpiresheaderinApacheExpiresActiveOnExpiresByTypeapplication/x-javascript"modificationplus2years"ExpiresByTypetext/css"modificationplus5years"Whenmodifinganasset?Modifytheassetname(automatically)!Appendanepochtimestamptothe,e.g.img_1185403733.png.Usetheversionnumberfromyoursourcecontrolsystem(cvsorsvnforexample),e.g.img_1.1.png.Manuallyincrementanumberinthe(e.g.whenyouseeaimg1.png,simplysavethemodifiedimageasimg2.png).Rule4:Gzipcomponentsyoucanaffectusers'downloadtimes90%+ofbrowserssupportcompressionGzip:notjustforHTMLHTMLScriptsStylesheetsxxsomesomexxxxxdeflatedeflatexxxxxxxxxxsomesomegzipscripts,stylesheets,XML,JSON(notimages,PDF)GzipConfigurationApache2.x:mod_deflateAddOutputFilterByTypeDEFLATEtext/htmltext/cssapplication/x-javascriptHTTPrequestAccept-Encoding:gzip,deflateHTTPresponseContent-Encoding:gzipVary:Accept-EncodingneededforproxiesRule5:PutCSSatthetopstylesheetsblockrenderinginIEsolution:putstylesheetsinHEAD(perspec)avoidsFlashofUnstyledContentuseLINK(not@import)SlowestisFastestRule6:MovescriptstothebottomscriptsblockparalleldownloadsacrossallhostnamesscriptsblockrenderingofeverythingbelowtheminthepageIEandFFRule6:MovescriptstothebottomscriptdeferattributeisnotasolutionblocksrenderinganddownloadsinFFslightblockinginIEsolution:movethemaslowinthepageaspossibleRule7:AvoidCSSexpressionsusedtosetCSSpropertiesdynamicallyinIEwidth:expression(document.body.clientWidth<600?“600px”:“auto”);problem:expressionsexecutemanytimesmousemove,keypress,resize,scroll,etc.Rule8:MakeJSandCSSexternalinline:HTMLdocumentisbiggerexternal:moreHTTPrequests,butcachedvariablespageviewsperuser(persession)emptyvs.fullcachestatscomponentre-useexternalistypicallybetterhomepagesmaybeanexceptionPost-OnloadDownloadinlineinfrontpagedownloadexternalfilesafteronloadwindow.onload=downloadComponents;functiondownloadComponents(){varelem=document.createElement("script");elem.src="";document.body.appendChild(elem);...}speedsupsecondarypagesExample:Googleoncethehomepagehasfinishedloading,thereisarequesttogetaspriteimage,whichisnotactuallyneededuntilsearchresultspageloadsExample:YahooConditionalpre-loading--waitsfortheusertostarttypinginthesearchbox.Onceyou'vebeguntyping,it'salmostguaranteedthatyou'llsubmitasearchquery.DynamicInliningstartwithpost-onloaddownloadsetcookieaftercomponentsdownloadedserver-side:ifcookie,useexternalelse,doinlinewithpost-onloaddownloadcookieexpirationdateiskeyspeedsupallpagesRule9:ReduceDNSlookupstypically20-120msblockparalleldownloadsOSandbrowserbothhaveDNScachesTTL(TimeToLive)1minute1minute10minutes1hour5minutes5minutes1hour1hour1minute5minutesTTL–howlongrecordcanbecachedbrowsersettingsoverrideTTLBrowserDNSCacheIEDnsCacheTimeout:30minutesKeepAliveTimeout:1minuteServerInfoTimeout:2minutesFirefoxnetwork.dnsCacheExpiration:1minutenetwork.dnsCacheEntries:20network.http.keep-alive.timeout:5minutesFasterfox:1hour,512entries,30secondsReducingDNSLookupsfewerhostnames–2-4(whataboutforumsandblogs?)keep-aliveRule10:MinifyJavaScriptMinifyExternal?MinifyInline?nonononononoyesnoyesyesyesyesnonononoyesyesnonominifyinlinescripts,tooMinifyvs.ObfuscateOriginalJSMinSavingsDojoSavings204K31K(15%)48K(24%)44K4K(10%)4K(10%)98K19K(20%)24K(25%)88K23K(27%)24K(28%)42K14K(34%)16K(38%)34K8K(22%)10K(29%)Average85K17K(21%)21K(25%)minify–it'ssaferRule11:Avoidredirects3xxstatuscodes–mostly301and302HTTP/1.1301MovedPermanentlyLocation:addExpiresheaderstocacheredirectsworstformofblockingRedirectsRedirectsnoyes–secondarypageyes–initialpageyes–secondarypagenoyes–initialpageyes–secondarypageyes–secondarypageyes–secondarypagenoAvoidRedirectsmissingtrailingslashuseAliasorDirectorySlashmod_rewriteCNAMEslogreferer–trackinternallinksoutboundlinks–harderbeacons–bewareofraceconditionXHR–bailatreadyState2Rule12:RemoveduplicatescriptshurtsperformanceextraHTTPrequests(IEonly)extraexecutionsatypical?2of10topsitescontainduplicatescriptsteamsize,#ofscriptsScriptInsertionFunctions<?phpfunctioninsertScript($jsfile){if(alreadyInserted($jsfile)){return;}pushInserted($jsfile);if(hasDependencies($jsfile)){$dependencies=getDependencies($jsfile);for($i=0;$i<count($dependencies);$i++){insertScript($dependencies[$i]);}}echo'<scripttype="text/javascript"src="'.getVersion($jsfile).'"></script>";}?>Rule13:TurnoffETagsuniqueidentifierreturnedinresponseETag:"c8897e-aee-4165acf0"Last-Modified:Thu,07Oct200420:54:08GMTusedinconditionalGETrequestsIf-None-Match:"c8897e-aee-4165acf0"If-Modified-Since:Thu,07Oct200420:54:08GMTifETagdoesn'tmatch,can'tsend304TheProblemwithETagsETagforasingleentityisalwaysdifferentacrossserversETagformatApache:inode-size-timestampIIS::ChangeNumberSiteswith>1serverreturntoofew304s(n-1)/nRemovethemApache:noneIIS:Rule14: