Even+Faster+Web+Sites_Google在web前端方面的经验.ppt

SteveSouderssouders,EvenFasterWebSites,Disclaimer:Thiscontentdoesnotnecessarilyreflecttheopinionsofmyemployer.,17%,83%,iGoogle,primedcache,theimportanceoffrontendperformance,9%,91%,iGoogle,emptycache,timespentonthefrontend,April2008,14Rules,MakefewerHTTPrequestsUseaCDNAddanExpiresheaderGzipcomponentsPutstylesheetsatthetopPutscriptsatthebottomAvoidCSSexpressionsMakeJSandCSSexternalReduceDNSlookupsMinifyJSAvoidredirectsRemoveduplicatescriptsConfigureETagsMakeAJAXcacheable,25%discountcode:ssouders25,Sept2007,June2009,EvenFasterWebsites,SplittheinitialpayloadLoadscriptswithoutblockingCoupleasynchronousscriptsDontscatterinlinescriptsSplitthedominantdomainFlushthedocumentearlyUseiframessparinglySimplifyCSSSelectors,Ajaxperformance(DougCrockford)WritingefficientJavaScript(NicholasZakas)Creatingresponsivewebapps(BenGalbraith,DionAlmaer)Comet(DylanSchiemann)BeyondGzipping(TonyGentilcore)OptimizeImages(StoyanStefanov,NicoleSullivan),whyfocusonJavaScript?,scriptsblock,blocksparalleldownloadsandrendering,Scriptsandotherresourcesdownloadedinparallel!How?Secretsauce?!varp=g.getElementsByTagName(HEAD)0;varc=g.createElement(script);c.type=text/javascript;c.onreadystatechange=n;c.onerror=c.onload=k;c.src=e;p.appendChild(c),MSN.com:parallelscripts,asynchronousscriptloading,XHREvalXHRInjectionScriptinIframeScriptDOMElementScriptDeferdocument.writeScriptTag,XHREval,scriptmusthavesamedomainasmainpagemustrefactorscript,varxhrObj=getXHRObject();xhrObj.onreadystatechange=function()if(xhrObj.readyState!=4)return;eval(xhrObj.responseText);xhrObj.open(GET,A.js,true);xhrObj.send();,XHRInjection,varxhrObj=getXHRObject();xhrObj.onreadystatechange=function()if(xhrObj.readyState!=4)return;varse=document.createElement(script);document.getElementsByTagName(head)0.appendChild(se);se.text=xhrObj.responseText;xhrObj.open(GET,A.js,true);xhrObj.send();,scriptmusthavesamedomainasmainpage,ScriptinIframe,iframemusthavesamedomainasmainpagemustrefactorscript:/accessiframefrommainpagewindow.frames0.createNewDiv();/accessmainpagefromiframeparent.document.createElement(div);,ScriptDOMElement,varse=document.createElement(script);se.src=,scriptandmainpagedomainscandiffernoneedtorefactorJavaScript,ScriptDefer,onlysupportedinIE(justlandedinFF3.1)scriptandmainpagedomainscandiffernoneedtorefactorJavaScript,document.writeScriptTag,document.write(+);,parallelizationonlyworksinIEparalleldownloadsforscripts,nothingelsealldocument.writesmustbeinsamescriptblock,browserbusyindicators,browserbusyindicators,goodtoshowbusyindicatorswhentheuserneedsfeedbackbadwhendownloadinginthebackground,Ensurescriptsexecuteinorder:necessarywhenscriptshavedependenciesIE:,ensure/avoidorderedexecution,loadscriptswithoutblocking,*Onlyotherdocument.writescriptsaredownloadedinparallel(inthesamescriptblock).,andthewinneris.,loadscriptswithoutblocking,dontletscriptsblockotherdownloadsyoucanstillcontrolexecutionorder,busyindicators,andonloadeventWhataboutinlinescripts?,synchronousJSexample:menu.js,varaExamples=couple-normal.php,NormalScriptSrc,couple-xhr-eval.php,XHREval,.managed-xhr.php,ManagedXHR;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);init();,asynchronousJSexample:menu.js,vardomscript=document.createElement(script);domscript.src=menu.js;document.getElementsByTagName(head)0.appendChild(domscript);varaExamples=couple-normal.php,NormalScriptSrc,couple-xhr-eval.php,XHREval,.managed-xhr.php,ManagedXHR;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);init();,scriptDOMelementapproach,before,after,loadscriptswithoutblocking,*Onlyotherdocument.writescriptsaredownloadedinparallel(inthesamescriptblock).,!IE,asynchronousscriptswrap-up,whataboutinlinedcodethatdependsonthescript?,whataboutinlinedcodethatdependsonthescript?,baselinecouplingresults(notgood),*ScriptsdownloadinparallelregardlessoftheDeferattribute.,needawaytoloadscriptsasynchronouslyANDpreserveorder,couplingtechniques,hardcodedcallbackwindowonloadtimerdegradingscripttagsscriptonload,technique1:hardcodedcallback,varaExamples=couple-normal.php,NormalScriptSrc,.;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);vardomscript=document.createElement(script);domscript.src=menu.js;document.getElementsByTagName(head)0.appendChild(domscript);init()iscalledfromwithinmenu.jsnotveryflexibledoesntworkfor3rdpartyscripts,technique2:windowonload,varaExamples=couple-normal.php,NormalScriptSrc,.;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);if(window.addEventListener)window.addEventListener(load,init,false);elseif(window.attachEvent)window.attachEvent(onload,init);init()iscalledatwindowonloadmustuseasynctechniquethatblocksonload:ScriptinIframedoesthisacrossmostbrowsersinit()calledlaterthannecessary,technique3:timer,vardomscript=document.createElement(script);domscript.src=menu.js;document.getElementsByTagName(head)0.appendChild(domscript);varaExamples=couple-normal.php,NormalScriptSrc,.;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);functioninitTimer(interval)if(undefined=typeof(EFWS)setTimeout(initTimer,interval);elseinit();initTimer(300);loadifintervaltoolow,delayiftoohighslightincreasedmaintenanceEFWS,JohnResigsdegradingscripttags,varaExamples=couple-normal.php,NormalScriptSrc,.;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);init();,attheendofmenu-degrading.js:varscripts=document.getElementsByTagName(script);varcntr=scripts.length;while(cntr)varcurScript=scriptscntr-1;if(curScript.src.indexOf(menu-degrading.js)!=-1)eval(curScript.innerHTML);break;cntr-;,/blog/degrading-script-tags/,cleanerclearersaferinlinedcodenotcalledifscriptfailsnobrowsersupportsit,technique4:degradingscripttags,varaExamples=couple-normal.php,NormalScriptSrc,.;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);vardomscript=document.createElement(script);domscript.src=menu-degrading.js;if(-1!=navigator.userAgent.indexOf(Opera)domscript.innerHTML=init();elsedomscript.text=init();document.getElementsByTagName(head)0.appendChild(domscript);elegant,flexible(cool!)notwellknowndoesntworkfor3rdpartyscripts(unless.),technique5:scriptonload,varaExamples=couple-normal.php,NormalScriptSrc,.;functioninit()EFWS.Menu.createMenu(examplesbtn,aExamples);vardomscript=document.createElement(script);domscript.src=menu.js;domscript.onloadDone=false;domscript.onload=function()if(!domscript.onloadDone)init();domscript.onloadDone=true;domscript.onreadystatechange=function()if(loaded=domscript.readyState)if(!domscript.onloadDone)init();domscript.onloadDone=true;document.getElementsByTagName(head)0.appendChild(domscript);prettynice,mediumcomplexity,whataboutmultiplescriptsthatdependoneachother,andinlinedcodethatdependsonthescripts?,twosolutions:ManagedXHRDOMElementandDocWrite,multiplescriptexample:menutier.js,varaRaceConditions=couple-normal.php,Normal.;varaWorkarounds=hardcoded-callback.php,Hardcod.;varaMultipleScripts=managed-xhr.php,ManagedXH.;varaLoadScripts=loadscript.php,loadScript,.;varaSubmenus=RaceConditions,aRaceConditions,Workarounds,aWorkarounds,MultipleScripts,aMultipleScripts,GeneralSolution,aLoadScripts;functioninit()EFWS.Menu.createTieredMenu(examplesbtn,aSubmenus);,technique1:managedXHR,varaRaceConditions=couple-normal.php,Normal.;varaWorkarounds=hardcoded-callback.php,Hardcod.;varaMultipleScripts=managed-xhr.php,ManagedXH.;varaLoadScripts=loadscript.php,loadScript,.;varaSubmenus=RaceConditions,aRaceConditions,.;functioninit()EFWS.Menu.createTieredMenu(examplesbtn,aSubmenus);EFWS.Script.loadScriptXhrInjection(menu.js,null,true);EFWS.Script.loadScriptXhrInjection(menutier.js,init,true);XHRInjectionasynchronoustechniquedoesnotpreserveorderwehavetoaddthat,before,after,EFWS.loadScriptXhrInjection,/Loadanexternalscript./Optionallycallacallbackandpreserveorder.loadScriptXhrInjection:function(url,onload,bOrder)variQ=EFWS.Script.queuedScripts.length;if(bOrder)varqScript=response:null,onload:onload,done:false;EFWS.Script.queuedScriptsiQ=qScript;varxhrObj=EFWS.Script.getXHRObject();xhrObj.onreadystatechange=function()if(xhrObj.readyState=4)if(bOrder)EFWS.Script.queuedScriptsiQ.response=xhrObj.responseText;EFWS.Script.injectScripts();elseeval(xhrObj.responseText);if(onload)onload();xhrObj.open(GET,url,true);xhrObj.send();,processqueue(nextslide),or.evalnow,callcallback,saveresponsetoqueue,addtoqueue(ifbOrder),EFWS.injectScripts,/Processqueuedscriptstoseeifanyarereadytoinject.injectScripts:function()varlen=EFWS.Script.queuedScripts.length;for(vari=0;ilen;i+)varqScript=EFWS.Script.queuedScriptsi;if(!qScript.done)if(!qScript.response)/STOP!needtowaitforthisresponsebreak;elseeval(qScript.response);if(qScript.onload)qScript.onload();qScript.done=true;,readyforthisscript,evalandcallcallback,bailneedtowaittopreserveorder,ifnotyetinjected,preservesexternalscriptorder,non-blocking,worksinallbrowsers,coupleswithinlinedcode,workswithscriptsacrossdomains,workswithscriptsacrossdomains,technique2:DOMElementandDocWrite,FirefoxrelyonSafari4andChrome2,EFWS.loadScripts,loadScripts:function(aUrls,onload)/firstpass:seeifanyofthescriptsareonadifferentdomainvarnUrls=aUrls.length;varbDifferent=false;for(vari=0;inUrls;i+)if(EFWS.Script.differentDomain(aUrlsi)bDifferent=true;break;/pickthebestloadingfunctionvarloadFunc=EFWS.Script.loadScriptXhrInjection;if(bDifferent)if(-1!=navigator.userAgent.indexOf(Firefox)|-1!=navigator.userAgent.indexOf(Opera)loadFunc=EFWS.Script.loadScriptDomElement;elseloadFunc=EFWS.Script.loadScriptDocWrite;/secondpass:loadthescriptsfor(vari=0;inUrls;i+)loadFunc(aUrlsi,(i+1=nUrls?onload:null),true);,multiplescriptswithdependencies,varaRaceConditions=couple-normal.php,Normal.;varaWorkarounds=hardcoded-callback.php,Hardcod.;varaMultipleScripts=managed-xhr.php,ManagedXH.;varaLoadScripts=loadscript.php,loadScript,.;varaSubmenus=RaceConditions,aRaceConditions,.;functioninit()EFWS.Menu.createTieredMenu(examplesbtn,aSubmenus);EFWS.Script.loadScripts(menu.js,menutier.js,init);scriptsonsamedomain:orderpreserved,noblockingscriptsondifferentdomain:orderpreserved:allloadsscriptsinparallel:allexceptSaf3,Chr1loadscriptandimageinparallel:FF,Saf4,Chr2,asynchronousscriptswrap-up,casestudy:GoogleAnalytics,recommendedpattern:1vargaJsHost=(https:=tocol)?https:/ssl.:http:/www.);document.write(unescape(%3Cscriptsrc=+gaJsHost+google-,1,casestudy:dojox.analytics.Urchin1,_loadGA:function()vargaHost=(https:=tocol)?https:/ssl.:http:/www.;dojo.create(script,src:gaHost+google-,1/dojox/analytics/Urchin,asynchronousloadingFF2,3.0,3.1b2;Safari3.2,4;Opera9.63,10;Chrome1.0,2.0,iframesblockonload,parentsonloaddoesntfireuntiliframeandallitscomponentsaredownloadedworkaroundforSafariandChrome:setiframesrcinJavaScriptdocument.getElementById(iframe1).src=url;,scriptsblockiframe,nosurprisescriptsintheparentblocktheiframefromloading,IE,Firefox,SafariChromeOpera,script,script,script,stylesheetsblockiframe(IE,FF),surprisestylesheetsintheparentblocktheiframeoritsresourcesinIE&Firefox,IE,Firefox,Saf