View
1.614
Download
1
Embed Size (px)
2. the importance of frontend performance 17% 83% iGoogle, primed cache 9% 91% iGoogle, empty cache 3. time spent on the frontend April 2008 Empty Cache Primed Cache www.aol.com 97% 97% www.ebay.com 95% 81% www.facebook.com 95% 81% www.google.com/search 47% 0% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com 98% 98% en.wikipedia.org/wiki 94% 91% www.yahoo.com 97% 96% www.youtube.com 98% 97% 4. 14 RULES
5. 6. 7. 8. 25% discount code: "ssouders25" 9. Sept 2007 10. June 2009 11. Even Faster Websites Split the initial payload Load scripts without blocking Couple asynchronous scripts Don't 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 Zakas) Creating responsive web apps (Ben Galbraith, Dion Almaer) Comet (Dylan Schiemann) Beyond Gzipping (Tony Gentilcore) Optimize Images (Stoyan Stefanov, Nicole Sullivan) 12. why focus on JavaScript? AOL eBay Facebook MySpace Wikipedia Yahoo! YouTube 13. scripts block only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10013 21. document.writeScript Tag document.write ("" + "" + "ipt>"); parallelization only works in IE parallel downloads for scripts, nothing else alldocument.write s must be in same script block http://stevesouders.com/cuzillion/?ex=10014 22. browser busy indicators 23. browser busy indicators goodto show busy indicators when the user needs feedback badwhen downloading in the background 24. ensure/avoid ordered execution
25. load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block). 26. and the winner is... XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer Script DOM Element Script Defer Script DOM Element Script DOM Element (FF) Script Defer (IE) XHR Eval XHR Injection Script in iframe Script DOM Element (IE) XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection different domains same domains no order preserve order no order no busy show busy show busy no busy preserve order 27. load scripts without blocking
28. 29. synchronous JS example: menu.js
30. asynchronous JS example: menu.js
script DOM element approach 31. before after 32. load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block). !IE 33. asynchronous scripts wrap-up
34.
35. baseline coupling results (not good) *Scripts download in parallel regardless of the Defer attribute. need a way to load scripts asynchronously AND preserve order 36. coupling techniques
37. technique 1: hardcoded callback
38. technique 2: window onload
39. technique 3: timer
40. John Resig's degrading script tags
at the end of menu-degrading.js: var scripts = document.getElementsByTagName("script"); var cntr = scripts.length; while ( cntr ) { var curScript = scripts[cntr-1]; if (curScript.src.indexOf("menu-degrading.js") != -1) { eval( curScript.innerHTML ); break; } cntr--; } http://ejohn.org/blog/degrading-script-tags/ cleaner clearer safer inlined code not called if script fails no browser supports it 41. technique 4: degrading script tags
42. technique 5: script onload
Recommended
View more >