For Your Script Loading Needs

For Your Script Loading Needs

on Apr 15th 2011 with 34 comments

As JavaScript usage has skyrocketed over the last few years, so has the sheer number of scripts that are being loaded in an average web page. With these script tags comes a lot of baggage, such as blocking and lack of dependency management.

Today, I’d like to bring your attention to a number of JavaScript loaders, which are mini toolkits that significantly simplify how you add and load scripts.

The Problem with Simple Script Tags

They Block the Page

The page stops ‘happening’ while the script is downloaded.

JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful.

No Easy Way to Manage Dependencies

Lack of dependency management is a big drawback.

Next up comes the issue of handling dependencies. For your average web page, you probably don’t need one. Check if your library is loaded and move on. For a non-trivial web application though, this isn’t a great solution. You’ll need to load scripts conditionally based on dependencies. Even then, you’ll still have to figure out the order in which they’re loaded. You can probably do it manually for 3-4 files, but when things begin piling up, you’re probably better off with an automated solution.

Available Choices

The initial idea for this round up was sparked by a post over at Hacker News about making a list of JavaScript script loaders, roughly a month ago. I watched the list balloon up from 3 to a grand total of 10 before I lost interest and moved on.

Now that sufficient time has passed, I think that list is going to be quite massive. Unfortunately, my Google-fu is pretty weak and I can’t seem to find it. If an eagle eyed user manages to find this thread, post in the comments below so I can link to it and hopefully expand my list here as well.

This list is drawn from recommendations by high level web developers who use these tools in their applications.

And as to my choices here, this list represents a superset of recommendations which flowed in after I asked some of the front end community to pitch in with the solutions they’re using. Some of the solutions below may handle dependency managements too, though most stick to simple asynchronous loading. Regardless of the extra niceties, each of the scripts below do one thing with aplomb — load up JavaScripts with minimal fuss.

So without further ado, and in no particular order:

HeadJS

Head JS loads scripts in parallel no matter how many of them and what the browser is. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.

Author: Tero Piirainen

Project URL: Here

Size: 6.3 KB

Related links:

LabJS

LABjs (Loading And Blocking JavaScript) is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.

Author: Kyle Simpson

Project URL: Here

Size: 4.7 KB

Related links:

RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Author: James Burke

Project URL: Here

Size: 13 KB

Related links:

ControlJS

ControlJS is a JavaScript module that handles both inline scripts and external scripts, delays script execution until after the page has rendered, allows for scripts to be downloaded, not executed and integrates with simple changes to HTML and no code changes

Author: Steve Souders

Project URL: Here

Size: 3.6 KB

Related links:

StealJS

The StealJS project is a collection of command and client based JavaScript utilities that make building, packaging, sharing and consuming JavaScript applications easy. Includes modules for dependency management, JS compression, cleaning and logging.

Author: Brian Moschel

Project URL: Here

Size: 11.4 KB

Related links:

yepnope

yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It works with both JavaScript and CSS and has a full test suite in QUnit that you can run in your set of supported browsers to make sure it works.

Author: Alex Sexton and Ralph Holzmann

Project URL: Here

Size: 3.4 KB

Related links:

PINF JS Loader

The loader allows for bootstrapping a consistent and state-of-the-art CommonJS environment for any supported platform (on server & in browser) and thus is ideally suited to be used as the target for the commonjs command and the development of cross-platform JavaScript applications and libraries.

Author: Christoph Dorn

Project URL: Here

Size: 22 KB

Related links:

JSLoad

JSLoad is a Javascript file loader that we wrote for Instructables. You give it a set of dependencies and groupings, and it loads the files you need, when your executing code needs them. The real usefulness of JSLoad comes with its ability to group dependencies using tags.

Author: Eric Nguyen

Project URL: Here

Size: 9.8 KB

Related links:

JsDefer

JsDefer features parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself and integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios among many others.

Author: Boris Moore

Project URL: Here

Size: 4.7 KB

Related links:

JSL (JavaScript Loader)

JSL features on-demand loading, is browser cacheable, dynamic asynchronous JavaScript loading, lazy loading and duplicate source prevention among a ton of other features.

Author: Andres Vidal

Project URL: Here

Size: 2.1 KB

Related links:

YUI 3 Get

The Get Utility provides a mechanism for attaching script and css resources — including cross-domain resources — to the DOM after the page has loaded.

Author: Adam Moore

Project URL: Here

Size: 17.9 KB

Related links:

DominateJS

DominateJS allows you to asynchronously load all your JavaScript, and defer sequential execution until the page loads. DominateJS aims to be a cross-browser and 100% document.write-safe library! This is a heavily modified (and powerful!) evolution of ControlJS.

Author: Chris Joel & Jason Benterou

Project URL: Here

Size: 48 KB

Load.js

load.js is a micro JS lazy-loader. Built on top of chain.js, it allows you to lazy load your JS scripts sequentially or in parallel and handle complex dependency chains.

Author: Chris O’Hara

Project URL: Here

Size: 2 KB

Related links:

BravoJS

BravoJS is an implementation of a proposed draft for CommonJS Modules/2.0

Author: Wes Garland

Project URL: Here

Size: 10.7 KB

Bootstrap

Bootstrap is a small library for dynamically loading JavaScript files.
It’s primary use case is for using in your JS code to load JS files only when they are used.

Author: Scott Koon

Project URL: Here

Size: 1.3 KB

LazyLoad

LazyLoad is a tiny (only 904 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.

Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don’t preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.

Author: Ryan Grove

Project URL: Here

Size: 1.6 KB

curl.js

curl.js is a small, but very fast AMD-compliant asynchronous loader. Current size: 4.5KB (2.1KB gzipped) using Google’s Closure Compiler.

If you’d like to use curl.js for non-AMD modules (ordinary javascript files), you’ll want to use the version with the js! plugin built in. You may also want to build-in the domReady module. The combined curl+js+domReady loader is still only 6.1KB (2.7KB gzipped).

Author: John Hann

Project URL: Here

Size: 5 KB

$script.js

$script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint. Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading, like CSS and images.

Author: Dustin Diaz

Project URL: Here

Size: 1.4 KB

NBL.js

NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.

Author: Berklee

Project URL: Here

Size: 971 B

Related links:

That’s a Wrap!

While each of the tools listed above handle script loading in slightly unique ways, be sure to perform your tests when deciding which is the right one for you.

As I mentioned earlier, if you think a loader should be here but isn’t, drop us a line below and we’ll update the roundup accordingly.

Siddharth is Siddharth on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://ben-carlson.com/ Ben Carlson

    Yikes that’s a ton of them! How about a “these three seem to be the ‘best’”? :P

    • http://www.ssiddharth.com Siddharth
      Author

      Haha. We like to over-do things. :)

      From my experience, the best are LabJS, HeadJS and ControlJS.

      • https://www.xeoscript.com Muhammed K K

        Thanks Siddharth, that saves a lot of time

    • http://webscripts.softpedia.com Catalin Cimpanu

      I tested about all of them for Softpedia.
      HeadJS is the best in my ranking as well.
      Using it lately with WordPress. Took a big chunk from the load time.

      • http://zyglobe.com Evan

        I’ve tested require.js and was really excited at first, but ran into issues with it’s limitation on how files have to be stored (in the same directory). I’m looking for a better alternative.

      • http://requirejs.org James Burke

        Evan: requirejs allows loading files from other directories, it does not require them to be in the same directory. Either use full URLs, or if use the paths: configuration. If you like you can post a message on the requirejs mailing list if you have questions.

  • http://www.modernooze.com sam – web design dorset

    Very good i like the arcticle clearly written and precise

  • http://www.mtsandeep.com sandeep mt

    Great, i was experimenting with the script loaders and today i got this post feed to my inbox.

    I am now using jQl – http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader
    It loads jquery and plugins. i am using jquery mostly so i found that useful.

  • Jayphen

    Maybe a usecase or demo article would have been more useful than a list. Lists are everywhere.

    yepnope is my favourite for the size, speed, and syntax.

    • http://www.ssiddharth.com Siddharth
      Author

      We don’t do lists much. Maybe once or twice a month. I think they have their place.

      But yep, definitely look for a tutorial with a demo explaining some of the issues you mention.

      Thanks for reading! :)

  • Jayphen

    For anyone who actually just wants a list, this is your best bet – https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=0

    • http://www.ssiddharth.com Siddharth
      Author

      Thanks, man. I think this is the spreadsheet from HN from a while back.

      Looks like they’re updated a lot and thankfully, I think I have 90% of their submissions on my list.

  • http://itcutives.com Jatin

    WoW Siddharth, such a long list. I almost dropped my jaw as I scrolled down the page.

    I am, myself, a big fan of HeadJS and LabJS, and was really surprised to see many new names in the list.

    Keep it up.

  • http://envato.com Drew

    Nice write up Sid! :)

    I’m a big fan of yepnope.js and use it frequently. Now that Modernizr custom builds come with it pre-packaged and aliased, I think well see it being used more and more frequently compared to others.

  • http://www.panasofts.com Website Designing and Development

    I would love to win to expand my web design business. thanks for sharing a beautiful articles

  • http://www.feuerwehr-vierkirchen.de/spiele/ Feuerwehr Spiele

    Very nice tutorial. It works perfect :-) thank you

  • http://www.kit-xenon.org/ Xenon

    Many thanks for this useful post. Are there librairies compatible with jquery ?

    thanks

    • http://www.stevendavisphoto.com Steven Davis

      Most of em are. It’s just javascript loading javascript. I use HeadJS. Works fine with jQuery.

  • http://www.aphrodite1994.com Mark

    Great. I really found the article informative and useful. Bookmarked it for future reference

  • http://www.davidtate.fr David

    I like your article. Thank You.

  • http://ipild.de VeN0m

    Thank you! The JavaScript-files were the biggest issue for a good load time. Now I’m using head.js, assumed that it works proper while I’m testing and keeping an eye on it.

  • http://twitter.com/monteslu Luis

    Wow, no mention of Dojo?

    Dojo solved this problem years ago with dojo.require()

    • http://www.stevendavisphoto.com Steven Davis

      Dojo sucks

      • http://twitter.com/monteslu Luis

        Nice. That’s all you got?

        Funny that these posts are moderated.

  • http://frugalcoder.us/ Michael J. Ryan

    Honestly, I prefer to group my scripts, and include them min+merged at the bottom of the page, generally broken up into 4-6 separate scripts…

    1 head script (css & compatability scripts, htm5shiv etc)
    first in bottom is jquery
    then some general js extensions
    then jquery extensions
    one for the site-wide scripts
    one for the section of the site you’re in…
    finally an initialize function that calls the method to load the page’s needs (inside the section merged script)

    all the scripts namespaced and only executed for needed things. This has worked better for me than the uber-loaders which often do refer to 30+ different external files, that’s a lot of TCP connections with round-trip latency added. Also, does really well when 90% of your traffic hits more than one page on the site.

    No loader, just better planning.

  • http://www.stevendavisphoto.com Steven Davis

    I use HeadJS in all my projects. It’s like Modernizr, but with the browser classes. That’s nice. I use the HTML5 Boilerplate with HeadJS instead of that.

  • http://ecenica.com/ Ecenica

    We have started testing HeadJS across our family of websites. We’re using the stripped-back version of HeadJS and are seeing a good 10-20% reduction in load times. Not all JS code will work asynchronously so may nit work for everyone.

  • dels

    I really have problems when i use loader script, already try HeadJS, JSL, etc but still have problem when loading script, since some script doesn’t load while using script tag it works… it can be checked by typing some object name which was undefined on firebug, maybe need combination with DOM ready or onload…

    Right now my current solution is compress all script using YUI or AjaxMin (from Microsoft) and wrote a php script that include all the script into one script then gzip em (which bring about 24kb after gzip, not bad)

  • http://funnyfacebook.org gecko

    wow a lot of great stuff.
    anyone can help what is the best performance from that list?

  • http://artbyjb.com/ Jeffrey Bennett

    Great list! I discovered HEADjs a while ago and I’ve been using it in my biggest projects. It’s a fantastic tool!

  • Daza Grohovaz

    Hi,

    try my little contribution to the github network. i hope you can enjoy it.

    https://github.com/dazagrohovaz/Require5.JS

    almost like the Node.JS require function, but for the browser.

    Features:
    – load and eval javascripts files once
    – no appendChild command
    – support sync and async XHR requests
    – save the scripts on HTML5 Storage if available
    – data transfer only if required, load scripts from storage or cache
    if available (no transfer), otherwise load scripts via XHR (data transfer)

    regards

  • http://www.repertoirefashion.co.uk Ben

    Great article, thanks for taking the time to write such an informative piece! I’ve +1 (plus one)’d it to help others find it!

  • http://www.denimgeek.com Herschel

    Nice post, i usually stick with what I know (head, load, lab steal etc) will have a look at some of the recommended, had trouble in past with JS conflicting.

  • Christina Beymer

    https://github.com/FrenkyNet/Simple-Javascript-Loader

    SOOOO MUCH simplier, without frills, no errors like with load js, not confusing lacking good documentation like require.js. Got to work in 30 seconds, spent a loooong time with load.js and look at the issues in github? good grief!