On Demand Javascript - Scalecamp 2009

  • 1,933 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,933
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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