4 ms·

Parallel script loading for improved page load

45 points by XLcommerce 15y ago

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

timmyd 15y ago
What's better ? HeadJS [per the link above] - [only a little dev in recent days] LabJS - http://labjs.com/ http://labjs.com/ [seems litte more active dev] RequireJS - http://requirejs.org/ 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 ?
- dave1010uk 15y 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 15y 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 15y 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 15y 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 15y ago
  Minified of combined files
dave1010uk 15y 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/ http://stevesouders.com/cuzillion/
hkolk 15y ago
Basically, this is the same trick as google analytics now uses: http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html 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
ck2 15y ago
Or as simple as <script defer async src="blah"></script> for purists <script defer="defer" async="async" src="blah"></script>
- DanielRibeiro 15y ago
  More about which browsers support this, its origins, and the specs: http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async http://stackoverflow.com/questions/1834077/which-browsers-su...
  - ck2 15y 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 15y 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 15y ago
Here is a large JavaScript loader comparison matrix. https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=2 https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J... Edit: All of the loaders can apparently load in parallel.

45 points by XLcommerce 15y ago

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

What's better ? HeadJS [per the link above] - [only a little dev in recent days] LabJS - http://labjs.com/ http://labjs.com/ [seems litte more active dev] RequireJS - http://requirejs.org/ 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 ?

dave1010uk 15y 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 15y 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 15y 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 15y 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 15y ago
Minified of combined files

dave1010uk 15y 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/ http://stevesouders.com/cuzillion/

hkolk 15y ago

Basically, this is the same trick as google analytics now uses: http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html 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

ck2 15y ago

Or as simple as <script defer async src="blah"></script> for purists <script defer="defer" async="async" src="blah"></script>

DanielRibeiro 15y ago
More about which browsers support this, its origins, and the specs: http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async http://stackoverflow.com/questions/1834077/which-browsers-su...
- ck2 15y 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 15y 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 15y ago

Here is a large JavaScript loader comparison matrix. https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=2 https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J... Edit: All of the loaders can apparently load in parallel.