The document discusses various techniques for loading JavaScript files without blocking parallel downloads and page rendering, including using XMLHttpRequest (XHR) to dynamically insert scripts, loading scripts in iframes, creating script elements, and using the defer attribute. It compares the techniques based on whether they allow scripts and pages from different domains, preserve script execution order, and are supported across browsers. Loading scripts asynchronously allows pages to render faster by allowing other components like stylesheets and images to download in parallel.

1. fastbydefaulthttp://stevesouders.com/docs/fronteers-20091105.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.

4. introduction 4Progressive Rendering 7Progressive Enhancement 5Make fewer HTTP requests 9Use a CDN 7Add an Expires header 8Gzip components 9Put stylesheets at the top 6Put scripts at the bottom 7Avoid CSS expressions 4Make JS and CSS external 5Reduce DNS lookups 9Minify JS 4Avoid redirects 9Remove duplicate scripts 2Configure ETags 8Make AJAX cacheable 6Splitting the initial payload 3Loading scripts without blocking 9Coupling asynchronous scripts 7Positioning inline scripts 6Sharding dominant domains 5Flushing the document early 8Using iframes sparingly 4Simplifying CSS Selectors 9Understanding Ajax performance 5Creating responsive web apps 7Writing efficient JavaScript 9Scaling with Comet 8Going beyond gzipping 7Optimizing images 9New Async Techniques 3YSlow 2Page Speed 2Performance & the Bottom Line 5Fast By Default 6Stanford CS193H 4Don't use @import 4F5 & XHR 5SpriteMe 3Browserscope 4HTTP Archive Format 2@font-face Performance 2SpeedGeeks 2Velocity OLC 2Firebug Net Panel 4Takeaways 1Thank You! 0introduction 4Progressive Rendering 7Progressive Enhancement 5Make fewer HTTP requests 9Use a CDN 7Add an Expires header 8Gzip components 9Put stylesheets at the top 6Put scripts at the bottom 7Avoid CSS expressions 4Make JS and CSS external 5Reduce DNS lookups 9Minify JS 4Avoid redirects 9Remove duplicate scripts 2Configure ETags 8Make AJAX cacheable 6Splitting the initial payload 3Loading scripts without blocking 9Coupling asynchronous scripts 7Positioning inline scripts 6Sharding dominant domains 5Flushing the document early 8Using iframes sparingly 4introduction 4Progressive Rendering 7Progressive Enhancement 5Make fewer HTTP requests 9Use a CDN 7Add an Expires header 8Gzip components 9Put stylesheets at the top 6Put scripts at the bottom 7Avoid CSS expressions 4Make JS and CSS external 5Reduce DNS lookups 9Minify JS 4Avoid redirects 9Remove duplicate scripts 2Configure ETags 8Make AJAX cacheable 6Splitting the initial payload 3Loading scripts without blocking 9Coupling asynchronous scripts 7Positioning inline scripts 6Sharding dominant domains 5Flushing the document early 8Using iframes sparingly 4Simplifying CSS Selectors 9Understanding Ajax performance 5Creating responsive web apps 7Writing efficient JavaScript 9Scaling with Comet 8Going beyond gzipping 7Optimizing images 9New Async Techniques 3YSlow 2Page Speed 2Performance & the Bottom Line 5Fast By Default 6Stanford CS193H 4Don't use @import 4F5 & XHR 5SpriteMe 3Browserscope 4HTTP Archive Format 2@font-face Performance 2SpeedGeeks 2Velocity OLC 2Firebug Net Panel 4Takeaways 1Thank You! 0Simplifying CSS Selectors 9Understanding Ajax performance 5Creating responsive web apps 7Writing efficient JavaScript 9Scaling with Comet 8Going beyond gzipping 7Optimizing images 9New Async Techniques 3YSlow 2Page Speed 2Performance & the Bottom Line 5Fast By Default 6Stanford CS193H 4Don't use @import 4F5 & XHR 5SpriteMe 3Browserscope 4HTTP Archive Format 2@font-face Performance 2SpeedGeeks 2Velocity OLC 2Firebug Net Panel 4Takeaways 1Thank You! 02561637960

5. GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-evalGoogle, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-businessAptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspxStrangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-businessSproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-fasterHTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

7. 17%83%iGoogle, primed cachethe importance of frontend performance9%91%iGoogle, empty cache

8. Make fewer HTTP requestsUse a CDNAdd an Expires headerGzip componentsPut stylesheets at the topPut scripts at the bottomAvoid CSS expressionsMake JS and CSS externalReduce DNS lookupsMinify JSAvoid redirectsRemove duplicate scriptsConfigure ETagsMake AJAX cacheable14 Rules

9. Even Faster Web SitesSplitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS SelectorsUnderstanding Ajax performance..........Doug CrockfordCreating responsive web apps............Ben Galbraith, Dion AlmaerWriting efficient JavaScript.............Nicholas ZakasScaling with Comet.....................Dylan SchiemannGoing beyond gzipping...............Tony GentilcoreOptimizing images...................Stoyan Stefanov, Nicole Sullivan

10. What makes sites feel slow?

11. Google Mail

12. Google DocsGoogle Docs

13. AOL

14. Twitter

15. ESPN

16. Best Buy

17. IKEA

18. CNN

19. (lack of)Progressive Rendering

20. Search

21. WebPagetest.orgVA, UK, NZIE7, IE8Dial, DSL, FIOSempty, empty & primedquad corePat Meenan (AOL)

22. News

23. Shopping

24. Sports

25. Progressive Enhancementdeliver HTMLdefer JSavoid DOMdecorate later

26. Progressive EnhancementProgressive Rendering

27. Yahoo!WikipediaeBayAOLMySpaceYouTubeFacebookWhy focus on JavaScript?

28. scripts block<script src="A.js"> blocks parallel downloads and rendering9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 37 secs: IE 8, FF 3.5, Chr3, Saf 4

29. 26% avg252K avginitial payload and execution

30. splitting the initial payloadsplit your JavaScript between what's needed to render the page and everything elsedefer "everything else"split manually (Page Speed), automatically (Microsoft Doloto)load scripts without blocking – how?

31. MSNScripts and other resources downloaded in parallel! 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

32. Loading Scripts Without BlockingXHR EvalXHR InjectionScript in IframeScript DOM ElementScript Deferdocument.write Script Tag

33. XHR EvalvarxhrObj = getXHRObject();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return;eval(xhrObj.responseText); };xhrObj.open('GET', 'A.js', true);xhrObj.send('');script & page must be same domainmassage script?

34. XHR InjectionvarxhrObj = 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 same domain as main page

35. Script in Iframe<iframe src='A.html' width=0 height=0 frameborder=0 id=frame1></iframe> iframe must have same domain as main pagemust refactor script:// access iframe from main pagewindow.frames[0].createNewDiv();// access main page from iframeparent.document.createElement('div');

36. Script DOM Elementvar se = document.createElement('script');se.src = 'http://anydomain.com/A.js';document.getElementsByTagName('head')[0].appendChild(se); script & page domains can differno need to massage JavaScriptmay not preserve execution order

37. GMail Mobile<script type="text/javascript">/*var ... */</script>get script DOM element's textremove commentseval() when invokedinline or iframeawesome for prefetching JS that might (not) be needed

38. SproutCorevar module1 = "...";var module2 = "...";eval() modules as needed2nd fastest downloading2nd fastest loading symbolsbest alternative

39. <script defer src='A.js'></script>supported in IE and FF 3.1+script and main page domains can differno need to refactor JavaScriptScript Defer

40. document.write("<script type='text/javascript' src='A.js'> <\/script>");parallelization only works in IEparallel downloads for scripts, nothing elseall document.writes must be in same script blockdocument.writeScript Tag

41. browser busy indicators

42. *Only other document.write scripts are downloaded in parallel (in the same script block).Load Scripts Without Blocking

43. XHR EvalXHR InjectionScript in iframeScript DOM ElementScript Defersame domainsdifferent domainsScript DOM ElementScript Deferpreserve orderno orderXHR EvalXHR InjectionScript in iframeScript DOM Element (IE)Script DOM Element (FF)Script Defer (IE)Managed XHR EvalManaged XHR Injectionno orderpreserve orderScript DOM Elementshow busyno busyScript DOM Element (FF)Script Defer (IE)Managed XHR InjectionManaged XHR EvalScript DOM Element (FF)Script Defer (IE)Managed XHR EvalManaged XHR Injectionno busyshow busyXHR InjectionXHR EvalScript DOM Element (IE)Managed XHR InjectionManaged XHR EvalScript DOM Elementand the winner is...

44. bad: stylesheet followed by inline scriptstylesheets load in parallel with other resources......unless followed by an inline scriptput inline JS above stylesheets or below other resourcesuse Link, not @import

45. MSNWikipediaeBayMySpacemispositioned inline scripts

48. Bothcombine scriptscombine stylesheetsadd an Expires headergzip responsesput stylesheets at the topput scripts at the bottomavoid CSS expressionsmake JS and CSS externalreduce DNS lookupsminify JS and CSSavoid redirectsremove duplicate scriptsmake Ajax cacheablereduce cookie sizeuse cookie-free domainsdon't scale imagesYSlowuse CSS spritesuse a CDNconfigure ETagsuse GET for Ajax requestsreduce # of DOM elementsno 404savoid image filtersoptimize faviconPage Speeddefer loading JSremove unused CSSuse efficient CSS selectorsoptimize imagesoptimize order of CSS & JSshard domainsleverage proxy caching

49. reduce HTTPuse a CDNadd Expiresgzipminifyconfigure ETags

52. Google+ 0.4 secsearches  0.6%

53. Yahoo!+ 0.4 sectraffic  5-9%

54. Bing+2 secrevenue  4.3%

55. Shopzilla-5 secrevenue 12%hw50%

56. Netflixoutbound bandwidth 43%

58. fast performance =better user experiencemore trafficmore revenuereduced costs

59. so...why don't more people do it?

60. it'stoohard!

62. "if it wasn't hard everyone would do it""the hard is what makes it great"

63. this year's theme:Fast by Default

64. Aptimize WAXconcatenate scriptsconcatenate stylesheetssprites, data: URIsfar future Expiresminify JS and CSSautomatically in real time

65. WAX on:http://sharepoint.microsoft.com# requests empty: 96  35# requests primed: 50  9scripts 7, stylesheets 12, images 25pages faster: 46-64% empty, 15-53% primed