如何建設(shè)高性能網(wǎng)站

HighperformanceWebSitesrichardchang騰訊技術(shù)大講堂不知大家有沒有看過這個ppt以及這個架構(gòu)圖Yahoo’sCasePerformanceresearchand14rulesExceptionalPerformancestartedin2004quantifyandimprovetheperformanceofallYahoo!productsworldwidecenterofexpertisebuildtools,analyzedatagather,research,andevangelizebestpracticesScopeperformancebreaksintotwocategoriesresponsetimeefficiencycurrentfocusisresponsetimeofwebproductsTheImportanceofFront-EndPerformancepercentageoftimespentonthefront-endBack-endvs.Front-endEmptyCacheFullCache82%86%94%86%81%92%98%92%86%64%97%95%96%86%80%88%95%88%97%95%ThePerformanceGoldenRule80-90%oftheend-userresponsetimeisspentonthefront-end.Startthere.GreaterpotentialforimprovementSimplerProventoworkPerformanceResearch/blog/2006/11/28/performance-research-part-1/80/20PerformanceRuleVilfredoPareto:

80%ofconsequencescomefrom20%ofcausesFocusonthe20%thataffects80%oftheend-userresponsetime.Startatthefront-end.1userrequests2userrequestsotherwebpages3userre-requestsEmptyvs.FullCache1userrequests2userrequestsotherwebpages3userre-requestsEmptyvs.FullCachewithanemptycache1userrequests2userrequestsotherwebpages3userre-requestsEmptyvs.FullCacheEmptyvs.FullCacheExpiresheader1userrequests2userrequestsotherwebpages3userre-requestswithafullcacheEmptyvs.FullCache emptycache 2.4seconds fullcache 0.9seconds83%fewerbytes90%fewerHTTPrequestsHowmuchdoesthisbenefitourusers?Itdependsonhowmanyusershavecomponentsincache.Whatpercentageofusersviewapagewithanemptycache*?

*“Emptycache”meansthebrowserhastorequestthecomponents

insteadofpullingthemfromthebrowserdiskcache.Whatpercentageofpageviews

aredonewithanemptycache*?/blog/2007/01/04/performance-research-part-2/Addanewimagetoyourpage<imgsrc="image/blank.gif"height="1"width="1"/>

withthefollowingresponseheaders:Expires:Thu,15Apr200420:00:00GMTLast-Modified:Wed,28Sep200623:49:57GMT}1pxBrowserCacheExperimentBrowserCacheExperimentRequestsfromthebrowserwillhaveoneoftheseresponsestatuscodes:

200–Thebrowserdoesnothavetheimage

initscache.304–Thebrowserhastheimageinitscache,

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

emptycache40-60%~20%userswith

emptycacheExperimentTakeawaysKeepinmindtheemptycacheuserexperience.Itmightbemoreprevalentthanyouthink!Usedifferenttechniquestooptimizefullversusemptycacheexperience./blog/2007/03/01/performance-research-part-31userrequestsHTTPQuickReviewHTTPresponseheadersentbythewebserver:HTTP/1.1200OKContent-Type:text/html;charset=utf-8Set-Cookie:C=abcdefghijklmnopqrstuvwxyz;domain=.1userrequestsHTTPQuickReview2userrequestsHTTPrequestheadersentbythebrowser:GET/HTTP/1.1Host:User-Agent:Mozilla/4.0(compatible;MSIE6.0;…

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

Cookie:C=abcdefghijklmnopqrstuvwxyz;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 /blog/2007/04/11/performance-research-part-4/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>→http://.../navbar.cgi?127,13client-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,errors/TR/html401/struct/objects.html#h-13.6CSSSprites–PreferredsizeofcombinedimageislessCSSSpritesGenerator-//articles/sprites#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)!Appendanepochtimestamptothefilename,e.g.img_1185403733.png.Usetheversionnumberfromyoursourcecontrolsystem(cvsorsvnforexample),e.g.img_1.1.png.Manuallyincrementanumberinthefilename(e.g.whenyouseeafilenamedimg1.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:PutCSSatthetopstylesheetsblockrenderinginIE/examples/css-bottom.phpsolution:putstylesheetsinHEAD(perspec)avoidsFlashofUnstyledContentuseLINK(not@import)SlowestisFastestRule6:MovescriptstothebottomscriptsblockparalleldownloadsacrossallhostnamesscriptsblockrenderingofeverythingbelowtheminthepageIEandFF/examples/js-middle.phpRule6:MovescriptstothebottomscriptdeferattributeisnotasolutionblocksrenderinganddownloadsinFFslightblockinginIEsolution:movethemaslowinthepageaspossibleRule7:AvoidCSSexpressionsusedtosetCSSpropertiesdynamicallyinIEwidth:expression(document.body.clientWidth<600?“600px”:“auto”);problem:expressionsexecutemanytimesmousemove,keypress,resize,scroll,etc./examples/expression-counter.phpRule8:MakeJSandCSSexternalinline:HTMLdocumentisbiggerexternal:moreHTTPrequests,butcachedvariablespageviewsperuser(persession)emptyvs.fullcachestatscomponentre-useexternalistypicallybetterhomepagesmaybeanexceptionPost-OnloadDownloadinlineinfrontpagedownloadexternalfilesafteronloadwindow.onload=downloadComponents;functiondownloadComponents(){varelem=document.createElement("script");elem.src="http://.../file1.js";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'ssafer/javascript/jsmin/docs/shrinksafeRule11:Avoidredirects3xxstatuscodes–mostly301and302HTTP/1.1301MovedPermanentlyLocation:/newuriaddExpiresheaderstocacheredirectsworstformofblocking/Protocols/rfc2616/rfc2616-sec10.htmlRedirectsRedirectsnoyes–secondarypageyes–initialpageyes–secondarypagenoyes–initialpageyes–secondarypageyes–secondarypageyes–secondarypagenoAvoidRedirectsmissingtrailingslash/astrologyuseAliasorDirectorySlashmod_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:Filetimesta