Google在Web前端方面的经验(青苹果)教程.ppt

Steve Souders souders@ /docs/sxswppt ;17%;;14 RULES;;;Sept 2007;June 2009;Even Faster Websites;;scripts block;MSN;asynchronous script loading;XHR Eval;XHR Injection;Script in Iframe;Script DOM Element;Script Defer;document.write Script Tag;browser busy indicators;browser busy indicators;Ensure scripts execute in order: necessary when scripts have dependencies IE: /cuzillion/?ex=10017 FF: /cuzillion/?ex=10018 Avoid scripts executing in order: faster – first script back is executed immediately /cuzillion/?ex=10019 ;load scripts without blocking;and the winner is...;load scripts without blocking;;synchronous JS example: menu.js;asynchronous JS example: menu.js;;load scripts without blocking;asynchronous scripts wrap-up;what about inlined code that depends on the script?;baseline coupling results (not good);coupling techniques;technique 1: hardcoded callback;technique 2: window onload;technique 3: timer;John Resigs degrading script tags;technique 4: degrading script tags;technique 5: script onload;what about multiple scripts that depend on each other, and inlined code that depends on the scripts?;multiple script example: menutier.js;technique 1: managed XHR;EFWS.loadScriptXhrInjection;EFWS.injectScripts;technique 2: DOM Element and Doc Write;EFWS.loadScripts;multiple scripts with dependencies;asynchronous scripts wrap-up;case study: Google Analytics;case study: dojox.analytics.Urchin1;asynchronous loading coupling;bad: stylesheet followed by inline script;eBay;iframes:  most expensive DOM element;iframes block onload;scripts block iframe;stylesheets block iframe (IE, FF);stylesheets after iframe still block (FF);iframes: no free connections;flush the document early;flushing and domain blocking;takeaways;impact on revenue;cost savings;if you want better user experience more revenue reduced operating expenses the strategy is clear Even Faster Web Sites;Steve Souders souders@ /docs/sxswppt