Smarter Script Loading with LABjs

Discussion

1. Stefano Ceschi Berrini

   WoW.. what a great resource David! Thanks a lot!!
2. Pozo

   Here is mine just for clicking events https://github.com/Pozo/bismuth
3. Christian Wisniewski

   Looking good, but wouldn’t it also work just adding the script-tag to the end of the html?
   That way the page would be displayed first, since the Javascript isn’t needed at that time at all..
4. Ralph

   An hour ago I stumbled upon head.js and now I see a similar LAB.js. I have to compare the options available, because to be honest i was quite exited when I saw those of head.js.
• aobo711

  there is another similar require.js, LAB.js can not judge whether a script has been loaded already
5. Avi

   Hi david,

   Excellent information….
6. Ikon

   In webkit based browsers there is still an iritating javascript loading que hazard. It doesn’t matter in what order you specify your scripts – even in the header – it will load them as it pleases. Will this LABjs help me in forcing those browsers to “behave”?
• David Walsh

  I’m not aware of the details of that WebKit issue. Is there documentation somewhere I can look at?
7. Ulli

   Very popular at delicious.com:
   http://headjs.com/

   I’m not a programmer, but the facts and features sound good.
8. Kyle Simpson

   @ikon @david —

   what i believe you’re referring to is that in Webkit (and indeed, also IE), if you dynamically add a bunch of script elements to a page, they will execute in “as soon as possible” order, not maintaining their insertion execution order. am i right?

   if so, you’ve hit on *exactly* why LABjs exists, to smooth out that problem. LABjs goes to great lengths to normalize loading and execution order behavior among the browsers.

   the .wait() in a chain will tell LABjs to make sure that scripts before the .wait() *execute* before scripts after the .wait(). All will still be loaded in parallel, but LABjs uses various tricks to “preload” them without execution, so that it can execute them in the order you specify by using .wait().

   side note: you can take a shortcut and just say you want *all* your scripts to execute in order (instead of adding a .wait() after every single one yourself), by setting the option AlwaysPreserveOrder to true, like this:

   $LAB.setOptions({AlwaysPreserveOrder:true})
   .script(...)
   .script(...)
   .wait(function(){ ... })
   .script(...)
   ...
   ;
   
9. Diego Pizarro

   I don’t see how different lab.js logic is different from for example

   		new Asset.javascript('js/lang.js', {
   			id: 'lang_js',
   			onload: function(){
   				console.log('loaded');
   			}
   		});
   

   If you wrap the asset calls in a chain you get the desired order don’t you?
10. Kyle Simpson

    @Diego-
    What LABjs does that may not be apparent is that it loads all scripts in the chain in parallel, but executes them in serial order. Just looping over a simple chain of loading calls will result in serial loading rather than parallel, which may be much slower.
• Diego Pizarro

  Thanks for the reply, I am sure i will give your script a try.
  Excellent!
11. Rizky Syazuli

    my preferred script loader is JSLoad. you should check it out.. the biggest difference with LABjs and other loader out there is you can define dependencies from the start, without having to do all those long chaining in all your pages.

    with LABjs you have to write this in every part of your application that needs a lightbox.

    $LAB
    .script('mootools-1.3.js').wait()
    .script('lightface/Source/LightFace.js').wait()
    .script('lightface/Source/LightFace.Request.js')
    .script('lightface/Source/LightFace.Static.js');
    

    with JSLoad you can instead create a central dependency config that can be used everywhere. so you do something like this instead.

    // define dependencies
    var scripts = [
      { name: 'mootools-1.3' },
      { name: 'lightface/Source/LightFace' },
      { name: 'lightface/Source/LightFace.Request' },
      { name: 'lightface/Source/LightFace.Static' },
      ...
      { name: 'somepage',
        requires: [
          'mootools-1.3',
          'lightface/Source/LightFace',
          'lightface/Source/LightFace.Request',
          'lightface/Source/LightFace.Static'
        ]
      },
      ...
    ];
    var jsLoader = new JSLoad(scripts);
    

    and on every page that needs the lightbox, u simply run this:

    jsLoader.load(['somepage'], function() {
      // do stuff
    });
    

    without having to rewrite all those long script chains.
12. Kyle Simpson

    @Rizky – LABjs’ API, the .script() function, accepts an array. You could extremely easily predefine your list of scripts in array, and re-use that, without a big long chain. I’m not sure I see how that’s a weakness of LABjs compared to your loader.
13. Shamly

    I have a PHP session variable named $_SESSION[‘token’] and assigning this to a javascript variable js_token. This is done in the php page itself within script tags. Now I need to access this variable from a js file that I have loaded via labjs. The problem is that labjs loads all the js files at the top of the header and the variable assigning script is placed after all the js files.

    This creates a problem as I cannot access the js_token variable.
    How can I fix this issue?
14. Himu

    Does labjs has any use in today’s JS world? can you do this using promise rather?