Parallel script loading for improved page load

http://headjs.com/#theory

by XLcommerce • 15 years ago

45 13 15 years ago

headjs.com

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

timmyd• 15 years ago

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 ?

dave1010uk2• 15 years ago

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);

threepointone• 15 years ago

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.

delambo• 15 years ago

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.

reustle• 15 years ago

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.

johnx123-up• 15 years ago

Minified of combined files

dave1010uk2• 15 years ago

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/

hkolk• 15 years ago

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

ck22• 15 years ago

Or as simple as

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

for purists

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

DanielRibeiro• 15 years ago

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

ck22• 15 years ago

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+

devmach• 15 years ago

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

bokchoi• 15 years ago

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.

Parallel script loading for improved page load

Related Stories