Your SlideShare is downloading. ×
On Demand Javascript - Scalecamp 2009
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

On Demand Javascript - Scalecamp 2009

1,980
views

Published on

Latest techniques for On-Demand Javascript, form my presentation at ScaleCamp - London, December 2009. …

Latest techniques for On-Demand Javascript, form my presentation at ScaleCamp - London, December 2009.

Covers Script Islands; "defer" and "async" attributes; survey of Javascript loading techniques; library support.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,980
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Script Loading Strategy ScaleCamp, London, 12-2009 Michael Mahemoff, Osmosoft http://mahemoff.com @mahemoff
    • 2. Me
    • 3. Script Islands
    • 4. script islands a script tag that’s not quite a script tag ... <script> // eval’d later on </script>
    • 5. script islands http://ejohn.org/blog/degrading- script-tags The dream: <script src=”lib.js”> // eval’d when lib.js loads </script>
    • 6. script islands One man’s dream is another man’s nightmare .... <script src=””> // this JS not eval’d. win! </script>
    • 7. script islands more elegant ... <script type=”x-tiddler”> // this JS not eval’d. win! </script>
    • 8. script islands but ... must still handle a closing “</script>” in the body. <script type=”x-tiddler”> alert(“</script>”); // fail! </script>
    • 9. script islands alternative technique - HTML comments. http://googlecode.blogspot.com/2009/09/gmail-for- mobile-html5-series-reducing.html <!-- alert(“hello world!”); --> ... still have to deal with unwanted “-->” in the script
    • 10. <script> Attributes
    • 11. defer http://www.whatwg.org/specs/web-apps/current-work/ #attr-script-async <script type=”text/javascript” src=”lib.js” defer=”defer”></script> eval’d after HTML parsed (might be loaded immediately though)
    • 12. async http://www.whatwg.org/specs/web-apps/current-work/ #attr-script-async <script type=”text/javascript” src=”lib.js” async=”async”> </script> eval’d later and independently (can be out of sequence)
    • 13. async with script tag var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'async'); document.documentElement.firstChild.appendChild(ga); })();
    • 14. async and defer <script> no defer defer blocks until downloaded eval after document no async and eval’d parsed eval’d asynchronously, once available (async=true async overrides defer=false, but should explicitly use defer=true for legacy support)
    • 15. On-Demand Techniques
    • 16. on-demand techniques • inline script tag <script>JS</script> • remote script tag <script src=”lib.js”></script> • script island <script type=”x-tiddler”></script> • dynamic script tag createElement(“script”) .... • ajax eval eval(xhr.responseText); • document.write() script tag [unusual]
    • 17. on-demand techniques non-blocking in simple/ on-demand legacy browsers no round trip cross-domain conventional (“as and when”) (without async/ defer) inline script tag ✔ ✔ remote script tag ✔ ✔ script island ✔ ✔ dynamic script tag ✔ ✔ ✔ ajax eval ✔ (if requested) document.write script tag ✔
    • 18. on-demand techniques http://www.stevesouders.com/blog/2009/04/27/loading- scripts-without-blocking/
    • 19. Library Support
    • 20. Library Support “require module” styles dojo.require(“dijit.form.Button”); // dojo goog.require(‘goog.dom’) // closure require(‘math’) // commonJS (not for browsers...yet)
    • 21. Library Support script tag based Resig “script island” style <script src=”lib.js”> alert(“runs after lib”); </script> NBL http://github.com/berklee/nbl/ :   <script type="text/javascript" src="nbl.js" opt="{ urchin: 'http://www.google-analytics.com/urchin.js', plugins: [ 'jquery.lightbox.min.js', 'jquery.carousel.min.js' ], ready: my_ready_function }" />
    • 22. discussion ... feedback & case studies plz: michael@mahemoff.com