Loading Scripts Without Blocking

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ 

Loading Scripts Without Blocking

April 27, 2009 10:49 pm | 46 Comments

This post is based on a chapter from Even Faster Web Sites, the follow-up to High Performance Web Sites. Posts in this series include: chapters and contributing authors, Splitting the Initial Payload,Loading Scripts Without Blocking, Coupling Asynchronous Scripts, Positioning Inline Scripts,Sharding Dominant Domains, Flushing the Document Early, Using Iframes Sparingly, andSimplifying CSS Selectors.

As more and more sites evolve into “Web 2.0″ apps, the amount of JavaScript increases. This is a performance concern because scripts have a negative impact on page performance. Mainstream browsers (i.e., IE 6 and 7)  block in two ways:

• Resources in the page are blocked from downloading if they are below the script.

• Elements are blocked from rendering if they are below the script.

The Scripts Block Downloads example demonstrates this. It contains two external scripts followed by an image, a stylesheet, and an iframe. The HTTP waterfall chart from loading this example in IE7 shows that the first script blocks all downloads, then the second script blocks all downloads, and finally the image, stylesheet, and iframe all download in parallel. Watching the page render, you’ll notice that the paragraph of text above the script renders immediately. However, the rest of the text in the HTML document is blocked from rendering until all the scripts are done loading.

Scripts block downloads in IE6&7, Firefox 2&3.0, Safari 3, Chrome 1, and Opera

Browsers are single threaded, so it’s understandable that while a script is executing the browser is unable to start other downloads. But there’s no reason that while the script is downloading the browser can’t start downloading other resources. And that’s exactly what newer browsers, including Internet Explorer 8, Safari 4, and Chrome 2, have done. The HTTP waterfall chart for the Scripts Block Downloads example in IE8 shows the scripts do indeed download in parallel, and the stylesheet is included in that parallel download. But the image and iframe are still blocked. Safari 4 and Chrome 2 behave in a similar way. Parallel downloading improves, but is still not as much as it could be.

Scripts still block, even in IE8, Safari 4, and Chrome 2

Fortunately, there are ways to get scripts to download without blocking any other resources in the page, even in older browsers. Unfortunately, it’s up to the web developer to do the heavy lifting.

There are six main techniques for downloading scripts without blocking:

• XHR Eval – Download the script via XHR and eval() the responseText.

• XHR Injection – Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.

• Script in Iframe – Wrap your script in an HTML page and download it as an iframe.

• Script DOM Element – Create a script element and set its src property to the script’s URL.

• Script Defer – Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1.

• document.write Script Tag – Write the <script src=""> HTML into the page usingdocument.write. This only loads script without blocking in IE.

You can see an example of each technique using Cuzillion. It turns out that these techniques have several important differences, as shown in the following table. Most of them provide parallel downloads, although Script Defer and document.write Script Tag are mixed. Some of the techniques can’t be used on cross-site scripts, and some require slight modifications to your existing scripts to get them to work. An area of differentiation that’s not widely discussed is whether the technique triggers the browser’s busy indicators (status bar, progress bar, tab icon, and cursor). If you’re loading multiple scripts that depend on each other, you’ll need a technique that preserves execution order.

TechniqueParallel DownloadsDomains can DifferExisting ScriptsBusy IndicatorsEnsures OrderSize (bytes)XHR EvalIE, FF, Saf, Chr, OpnonoSaf, Chr-~500XHR InjectionIE, FF, Saf, Chr, OpnoyesSaf, Chr-~500Script in IframeIE, FF, Saf, Chr, OpnonoIE, FF, Saf, Chr-~50Script DOM ElementIE, FF, Saf, Chr, OpyesyesFF, Saf, ChrFF, Op~200Script DeferIE, Saf4, Chr2, FF3.1yesyesIE, FF, Saf, Chr, OpIE, FF, Saf, Chr, Op~50document.write Script TagIE, Saf4, Chr2, OpyesyesIE, FF, Saf, Chr, OpIE, FF, Saf, Chr, Op~100

The question is: Which is the best technique? The optimal technique depends on your situation. This decision tree should be used as a guide. It’s not as complex as it looks. Only three variables determine the outcome: is the script on the same domain as the main page, is it necessary to preserve execution order, and should the busy indicators be triggered.

Ideally, the logic in this decision tree would be encapsulated in popular HTML templating languages (PHP, Python, Perl, etc.) so that the web developer could just call a function and be assured that their script gets loaded using the optimal technique.

In many situations, the Script DOM Element is a good choice. It works in all browsers, doesn’t have any cross-site scripting restrictions, is fairly simple to implement, and is well understood. The one catch is that it doesn’t preserve execution order across all browsers. If you have multiple scripts that depend on each other, you’ll need to concatenate them or use a different technique. If you have an inline script that depends on the external script, you’ll need to synchronize them. I call this “coupling” and present several ways to do this in Coupling Asynchronous Scripts.