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.

1. Script Loading Strategy
ScaleCamp, London, 12-2009
Michael Mahemoff, Osmosoft
http://mahemoff.com
@mahemoff

5. Me

6. Script Islands

7. script islands
a script tag that’s not quite a script tag ...
<script>
// eval’d later on
</script>

9. script islands
http://ejohn.org/blog/degrading-
script-tags
The dream:
<script src=”lib.js”>
// eval’d when lib.js loads
</script>

10. script islands
One man’s dream is another
man’s nightmare ....
<script src=””>
// this JS not eval’d. win!
</script>

11. script islands
more elegant ...
<script type=”x-tiddler”>
// this JS not eval’d. win!
</script>

12. script islands
but ... must still handle a closing
“</script>” in the body.
<script type=”x-tiddler”>
alert(“</script>”); // fail!
</script>

13. 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

14. <script>
Attributes

15. 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)

16. 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)

17. 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);
})();

18. 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)

19. On-Demand
Techniques

20. 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]

21. 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 ✔

22. on-demand techniques
http://www.stevesouders.com/blog/2009/04/27/loading-
scripts-without-blocking/

23. Library Support

24. Library Support
“require module” styles
dojo.require(“dijit.form.Button”); // dojo
goog.require(‘goog.dom’) // closure
require(‘math’) // commonJS (not for browsers...yet)

25. 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 }" />

26. discussion ...
feedback & case studies plz: michael@mahemoff.com