Parallel script loading for improved page load | Hacker News Reader

Parallel script loading for improved page load

headjs.com

45 pointsXLcommerce13 comments

Includes samples that demonstrate impressive (~50%) speedup for a page with a lot of script files.

Or as simple as

   <script defer async src="blah"></script>

for purists

   <script defer="defer" async="async" src="blah"></script>

More about which browsers support this, its origins, and the specs: http://stackoverflow.com/questions/1834077/which-browsers-su...

Almost all modern browsers (including IE which invented it) support DEFER.

The two most popular browsers support ASYNC going back to versions from September 2010, Chrome 11+ and Firefox 3.6+

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..

What's better ?

HeadJS [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 ?

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.

Minified of combined files

Basically, this is the same trick as google analytics now uses: http://code.google.com/apis/analytics/docs/tracking/asyncTra...

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

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.

http://stevesouders.com/cuzillion/

Here is a large JavaScript loader comparison matrix.

https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J...

Edit: All of the loaders can apparently load in parallel.

Reply on news.ycombinator.com