Script Loading Strategy


                ScaleCamp, London, 12-2009

                Michael Mahemoff, Osmosoft

        ...
Me
Script Islands
script islands
a script tag that’s not quite a script tag ...


           <script>
            // eval’d later on
       ...
script islands
http://ejohn.org/blog/degrading-
script-tags


The dream:
<script src=”lib.js”>
 // eval’d when lib.js load...
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>”...
script islands
alternative technique - HTML comments.
http://googlecode.blogspot.com/2009/09/gmail-for-
mobile-html5-serie...
<script>
Attributes
defer
http://www.whatwg.org/specs/web-apps/current-work/
                #attr-script-async

     <script type=”text/javas...
async
 http://www.whatwg.org/specs/web-apps/current-work/
                 #attr-script-async


<script type=”text/javascr...
async with script tag


 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXX-X']);
 _gaq.push(['_trackPageview']);...
async and defer
<script>        no defer                    defer


           blocks until downloaded    eval after docum...
On-Demand
Techniques
on-demand techniques
• inline script tag    <script>JS</script>

• remote script tag    <script src=”lib.js”></script>

• ...
on-demand techniques
                                                                                      non-blocking in...
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

...
Library Support
script tag based

Resig “script island” style

<script src=”lib.js”>
 alert(“runs after lib”);
</script>

...
discussion ...




feedback & case studies plz: michael@mahemoff.com
On Demand Javascript - Scalecamp 2009
On Demand Javascript - Scalecamp 2009
On Demand Javascript - Scalecamp 2009
On Demand Javascript - Scalecamp 2009
Upcoming SlideShare
Loading in...5
×

On Demand Javascript - Scalecamp 2009

2,032

Published on

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
2,032
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • On Demand Javascript - Scalecamp 2009

    1. 1. Script Loading Strategy ScaleCamp, London, 12-2009 Michael Mahemoff, Osmosoft http://mahemoff.com @mahemoff
    2. 2. Me
    3. 3. Script Islands
    4. 4. script islands a script tag that’s not quite a script tag ... <script> // eval’d later on </script>
    5. 5. script islands http://ejohn.org/blog/degrading- script-tags The dream: <script src=”lib.js”> // eval’d when lib.js loads </script>
    6. 6. script islands One man’s dream is another man’s nightmare .... <script src=””> // this JS not eval’d. win! </script>
    7. 7. script islands more elegant ... <script type=”x-tiddler”> // this JS not eval’d. win! </script>
    8. 8. script islands but ... must still handle a closing “</script>” in the body. <script type=”x-tiddler”> alert(“</script>”); // fail! </script>
    9. 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. 10. <script> Attributes
    11. 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. 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. 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. 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. 15. On-Demand Techniques
    16. 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. 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. 18. on-demand techniques http://www.stevesouders.com/blog/2009/04/27/loading- scripts-without-blocking/
    19. 19. Library Support
    20. 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. 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. 22. discussion ... feedback & case studies plz: michael@mahemoff.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×