If all you want is asynchronous JavaScript loading, all you need is the Google Analytics snippet:
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = 'http://www.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
imo (fwiw), stability, a good api, and decent test coverage is a better metric to measure which one's better.
I've used LABjs, and it's really good. After a point, I don't _need_ any more dev work done on it.
I can't comment on the dev activity for any of these tools, but I do have experience with lab.js and require.js.
From what I have seen, the functionality of head.js looks like a subset of lab.js. Lab.js has a richer API with queueing and waiting. Require.js is a whole different beast - it revolves around the definition of modules (module pattern) and the scripts required to pull down to organize modules. There are a lot of tools in require.js that help with ordering the execution of loaded scripts, pulling down files as text (can't do this in lab.js), and optimizing (compiling modules into one big uglified file).
They are all good tools, but different - pick the best one suited for your project.
The creator of LabJS just did a talk at GothamJS and he has essentially devoted his life to making sure it is perfect. I highly recommend taking a good look at it.
If you're doing lots of web performance tests with loading scripts, Steve Souder's "Cuzillion" is a really helpful tool that lets you create dummy HTML pages that load resources with definable delays.
We verified this at our company (we don't like it our site goes down together with google :) ), and it works pretty good. I would advocate headjs to load itself with it though and inline that piece of jscript
with using someting like headjs, you have some pros :
- you don't have to put tons of <script> tag on your template. just pass the parameters to headjs*
- you can load js files and "after" run some function and this function hasn't have to be in another js file or document.ready(). you can do this operations any time after full page load.
* Ok, i know : one should compress and merge javascript files..
13 comments
[ 4.3 ms ] story [ 37.4 ms ] threadHeadJS [per the link above] - [only a little dev in recent days]
LabJS - http://labjs.com/ [seems litte more active dev]
RequireJS - http://requirejs.org/ [most active dev]
HeadJS dev seems a little on the light side [ala none - see GitHub for each] ? Anyone have any experience with Lab or Require ?
From what I have seen, the functionality of head.js looks like a subset of lab.js. Lab.js has a richer API with queueing and waiting. Require.js is a whole different beast - it revolves around the definition of modules (module pattern) and the scripts required to pull down to organize modules. There are a lot of tools in require.js that help with ordering the execution of loaded scripts, pulling down files as text (can't do this in lab.js), and optimizing (compiling modules into one big uglified file).
They are all good tools, but different - pick the best one suited for your project.
http://stevesouders.com/cuzillion/
We verified this at our company (we don't like it our site goes down together with google :) ), and it works pretty good. I would advocate headjs to load itself with it though and inline that piece of jscript
The two most popular browsers support ASYNC going back to versions from September 2010, Chrome 11+ and Firefox 3.6+
- you don't have to put tons of <script> tag on your template. just pass the parameters to headjs*
- you can load js files and "after" run some function and this function hasn't have to be in another js file or document.ready(). you can do this operations any time after full page load.
* Ok, i know : one should compress and merge javascript files..
https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J...
Edit: All of the loaders can apparently load in parallel.