On Demand Javascript - Scalecamp 2009
Upcoming SlideShare
Loading in...5

On Demand Javascript - Scalecamp 2009



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.



Total Views
Views on SlideShare
Embed Views



6 Embeds 288

http://softwareas.com 281
http://www.hanrss.com 2
http://www.techgig.com 2
http://xss.yandex.net 1
http://www.protopage.com 1 1



Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

On Demand Javascript - Scalecamp 2009 On Demand Javascript - Scalecamp 2009 Presentation Transcript

  • Script Loading Strategy ScaleCamp, London, 12-2009 Michael Mahemoff, Osmosoft http://mahemoff.com @mahemoff
  • Me
  • Script Islands
  • script islands a script tag that’s not quite a script tag ... <script> // eval’d later on </script>
  • script islands http://ejohn.org/blog/degrading- script-tags The dream: <script src=”lib.js”> // eval’d when lib.js loads </script>
  • script islands One man’s dream is another man’s nightmare .... <script src=””> // this JS not eval’d. win! </script>
  • script islands more elegant ... <script type=”x-tiddler”> // this JS not eval’d. win! </script>
  • script islands but ... must still handle a closing “</script>” in the body. <script type=”x-tiddler”> alert(“</script>”); // fail! </script>
  • 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
  • <script> Attributes
  • 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)
  • 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)
  • 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); })();
  • 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)
  • On-Demand Techniques
  • 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]
  • 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 ✔
  • on-demand techniques http://www.stevesouders.com/blog/2009/04/27/loading- scripts-without-blocking/
  • Library Support
  • Library Support “require module” styles dojo.require(“dijit.form.Button”); // dojo goog.require(‘goog.dom’) // closure require(‘math’) // commonJS (not for browsers...yet)
  • 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 }" />
  • discussion ... feedback & case studies plz: michael@mahemoff.com