《渴切开源中文css框架之google在web前端方面的经验ppt培训课件》由会员分享，可在线阅读，更多相关《渴切开源中文css框架之google在web前端方面的经验ppt培训课件（69页珍藏版）》请在金锄头文库上搜索。
1、Steve Souders http:/ Faster Web Sites,Disclaimer: This content does not necessarily reflect the opinions of my employer.,17%,83%,iGoogle, primed cache,the importance of frontend performance,9%,91%,iGoogle, empty cache,time spent on the frontend,April 2008,14 RULES,MAKE FEWER HTTP REQUESTS USE A CDN
2、 ADD AN EXPIRES HEADER GZIP COMPONENTS PUT STYLESHEETS AT THE TOP PUT SCRIPTS AT THE BOTTOM AVOID CSS EXPRESSIONS MAKE JS AND CSS EXTERNAL REDUCE DNS LOOKUPS MINIFY JS AVOID REDIRECTS REMOVE DUPLICATE SCRIPTS CONFIGURE ETAGS MAKE AJAX CACHEABLE,25% discount code: “ssouders25“,Sept 2007,June 2009,Eve
3、n Faster Websites,Split the initial payload Load scripts without blocking Couple asynchronous scripts Dont scatter inline scripts Split the dominant domain Flush the document early Use iframes sparingly Simplify CSS Selectors,Ajax performance (Doug Crockford) Writing efficient JavaScript (Nicholas Z
4、akas) Creating responsive web apps (Ben Galbraith, Dion Almaer) Comet (Dylan Schiemann) Beyond Gzipping (Tony Gentilcore) Optimize Images (Stoyan Stefanov, Nicole Sullivan),why focus on JavaScript?,scripts block, blocks parallel downloads and rendering,http:/ and other resources downloaded in parall
5、el! How? Secret sauce?! var p=g.getElementsByTagName(“HEAD“)0; var c=g.createElement(“script“); c.type=“text/javascript“; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c),MSN.com: parallel scripts,asynchronous script loading,XHR Eval XHR Injection Script in Iframe Script DOM E
6、lement Script Defer document.write Script Tag,XHR Eval,script must have same domain as main page must refactor script,var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() if ( xhrObj.readyState != 4 ) return;eval(xhrObj.responseText); xhrObj.open(GET, A.js, true); xhrObj.send();,http:
7、/ Injection,var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() if ( xhrObj.readyState != 4 ) return;var se=document.createElement(script);document.getElementsByTagName(head)0.appendChild(se);se.text = xhrObj.responseText; xhrObj.open(GET, A.js, true); xhrObj.send();,script must have
8、 same domain as main page,http:/ in Iframe,iframe must have same domain as main page must refactor script: / access iframe from main page window.frames0.createNewDiv();/ access main page from iframe parent.document.createElement(div);,http:/ DOM Element,var se = document.createElement(script); se.sr
9、c = http:/ document.getElementsByTagName(head)0 .appendChild(se);,script and main page domains can differ no need to refactor JavaScript,http:/ Defer,only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript,http:/ Script Tag,document.write(“
10、 + “);,parallelization only works in IE parallel downloads for scripts, nothing else all document.writes must be in same script block,http:/ busy indicators,browser busy indicators,good to show busy indicators when the user needs feedback bad when downloading in the background,Ensure scripts execute
11、 in order: necessary when scripts have dependencies IE: http:/ FF: http:/ Avoid scripts executing in order: faster first script back is executed immediately http:/ ordered execution,load scripts without blocking,*Only other document.write scripts are downloaded in parallel (in the same script block)
12、.,and the winner is.,load scripts without blocking,dont let scripts block other downloads you can still control execution order, busy indicators, and onload eventWhat about inline scripts?,synchronous JS example: menu.js,var aExamples = couple-normal.php, Normal Script Src,couple-xhr-eval.php, XHR E
13、val,.managed-xhr.php, Managed XHR; function init() EFWS.Menu.createMenu(examplesbtn, aExamples); init(); ,asynchronous JS example: menu.js, var domscript = document.createElement(script); domscript.src = “menu.js“; document.getElementsByTagName(head)0.appendChild(domscript); var aExamples = couple-n
14、ormal.php, Normal Script Src,couple-xhr-eval.php, XHR Eval,.managed-xhr.php, Managed XHR; function init() EFWS.Menu.createMenu(examplesbtn, aExamples); init(); ,script DOM element approach,before,after,load scripts without blocking,*Only other document.write scripts are downloaded in parallel (in the same script block).,!IE,asynchronous scripts wrap-up,what about inlined code that depends on the script?,what about inlined code that depends on the script?,
