0

Just started looking at asynchronous javascript loading libs such as lab.js and script.js. My question is about best practises for using this type of async loading pattern.

I've thought of a couple possible setups:

  1. Load the async loader at the top or the page with a script tag. This allows for gzipping and caching, but it also blocks during this initial load. This is likely not a huge deal as these loaders are supposed to be fairly small (should we load css first still) ?

  2. Have the async loader code inline in your html, then start using immediately to load dependencies. This means there's no separate request for the async loader so it's likely a bit faster, but it also doesn't get gzipped and cached, so it has to get loaded each time.

  3. Do the classic load of JS at the bottom of the page so stylesheets etc are loaded first. Place async loader in blocking script tag at the bottom of the page, then load all dependencies asynchronously.

What is the most used scenario, how do people normally load their js asynchronously ??

brad
  • 31,987
  • 28
  • 102
  • 155
  • don't foget about yepnope.js - my personal favorite, i have my yepnope inline right before the closing body tag - guess that is your case 2, works best for me. – ezmilhouse Mar 31 '11 at 15:57

1 Answers1

5
<head>
   <!-- data-main attribute tells require.js to load
        scripts/main.js after require.js loads. -->
   <script data-main="scripts/main" src="scripts/require.js"></script>
</head>

I recommend (1) you load it in the head.

It's not worthwhile to in-line it in your html (2) because it stops caching. Not to mention that you have to inline it everywhere and it's just ugly.

A valid alternative (3) (but personally not worth it) is to create a <script> tag using JavaScript and injecting it into your head. If this is done at the bottom of your body it should hopefully allow your html/css to fully load before your async loader gets started.

As a nice bonus require.js allows you to give a pointer to your main script and it will load that once require has loaded. You can then do most of your async file loading in the main script and set up a well-defined set of requirements for each files in terms of what they require on the page.

Reasons for loading your javascript asynchronously includes a

  • fast load of the initial HTML/CSS.
  • Your headers stays "clean"
  • Your javascript and html is clearly seperated.
  • You can dynamically load files based on feature detection.
  • You can clearly define your inter-file depencies.
  • You can load libraries in a modular fashion (like YUI) instead of loading the entire library (like jQuery).

And the list goes on. It's very clean and tidy to include a line like above in your default/shared view or your master page.

To expand on dynamically loading javascript files based on feature detection. What I mean there is you can browse the DOM for which javascript files should be loaded. For example if you have a <ul class="image-slider"> on your page then you can detect that through standard css selectors and load your image-slider.js file to unobtrusively enhance that with JavaScript.

This means you don't have to manually include it on every page with an image slider. You don't have to include on every page by default and you can use one piece of information (the class name) to apply both visual style and functionality.

Raynos
  • 166,823
  • 56
  • 351
  • 396