google在web前端方面的经验ppt模板板下载

[e-mail]:Thiscontentdoesnotnecessarilyreflecttheopinionsofmyemployer.17%83%iGoogle,primedcachetheimportanceoffrontendperformance9%91%iGoogle,emptycachetimespentonthefrontendEmptyCachePrimedCache:ssouders25Sept2007June2009EvenFasterWebsitesSplittheinitialpayloadLoadscriptswithoutblockingCoupleasynchronousscriptsDon'tscatterinlinescriptsSplitthedominantdomainFlushthedocumentearlyUseiframessparinglySimplifyCSSSelectorsAjaxperformance(DougCrockford)WritingefficientJavaScript(NicholasZakas)Creatingresponsivewebapps(BenGalbraith,DionAlmaer)Comet(DylanSchiemann)BeyondGzipping(TonyGentilcore)OptimizeImages(StoyanStefanov,NicoleSullivan)AOLeBayFacebookMySpaceWikipediaYahoo!whyfocusonJavaScript?YouTubescriptsblockscriptsrc=A.jsblocksparalleldownloadsandrendering=10008MSNScriptsandotherresourcesdownloadedinparallel!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:parallelscriptsasynchronousscriptloadingXHREvalXHRInjectionScriptinIframeScriptDOMElementScriptDeferdocument.writeScriptTagXHREvalscriptmusthavesamedomainasmainpagemustrefactorscriptvarxhrObj=getXHRObject();xhrObj.onreadystatechange=function(){if(xhrObj.readyState!=4)return;eval(xhrObj.responseText);};xhrObj.open('GET','A.js',true);xhrObj.send('');=10009XHRInjectionvarxhrObj=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=10015ScriptinIframeiframesrc='A.html'width=0height=0frameborder=0id=frame1/iframeiframemusthavesamedomainasmainpagemustrefactorscript://accessiframefrommainpagewindow.frames[0].createNewDiv();//accessmainpagefromiframeparent.document.createElement('div');=10012ScriptDOMElementvarse=document.createElement('script');se.src='('head')[0].appendChild(se);scriptandmainpagedomainscandiffernoneedtorefactorJavaScript=10010ScriptDeferscriptdefersrc='A.js'/scriptonlysupportedinIE(justlandedinFF3.1)scriptandmainpagedomainscandiffernoneedtorefactorJavaScript=10013document.writeScriptTagdocument.write(scr+ipttype='text/javascript'src='A.js'+/scr+ipt);parallelizationonlyworksinIEparalleldownloadsforscripts,nothingelsealldocument.writesmustbeinsamescriptblock=10014loadscriptswithoutblocking*Onlyotherdocument.writescriptsaredownloadedinparallel(inthesamescriptblock).asynchronousJSexample:menu.jsscripttype=text/javascriptvardomscript=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();/scriptscriptDOMelementapproachbeforeafterloadscriptswithoutblocking*Onlyotherdocument.writescriptsaredownloadedinparallel(inthesamescriptblock).!IEwhataboutinlinedcodethatdependsonthescript?couplingtechniqueshardcodedcallbackwindowonloadtimerdegradingscripttagsscriptonloadtechnique5:scriptonloadscripttype=text/javascriptvaraExamples=[['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);/scriptprettynice,mediumcomplexitycasestudy:GoogleAnalyticsrecommendedpattern:1scripttype=text/javascriptvargaJsHost=((https:==document.location.protocol)?:);document.write(unescape(%3Cscriptsrc='+gaJsHost+google-analytics.com/ga.js'type='text/javascript'%3E%3C/script%3E));/scriptscript