Even Faster Web Sites

Chapter 5. Coupling Asynchronous Scripts

Chapter 4 explains how to load external scripts asynchronously. When scripts are loaded the normal way (<script src="url"></script>), they block all other downloads in the page, and any elements below the script are blocked from rendering. Loading scripts asynchronously avoids this blocking behavior, resulting in a page that loads and feels faster.

The performance benefit of loading scripts without blocking comes at a cost. Whenever code is executed asynchronously, race conditions are possible. In the case of external scripts, the concern is inline scripts that use symbols defined in the external script. If the external script is loaded asynchronously without thought to the inlined code, race conditions may result in undefined symbol errors.

When there is a code dependency between an asynchronously loaded external script and an inline script, the two scripts have to be coupled in such a way as to guarantee execution order. Not surprisingly, there’s no easy way to do this across all browsers. The problem and several solutions are presented in this chapter, broken down into the following sections:

Code Example: menu.js

The example used throughout this chapter is described in this section. It creates the scenario of an inline script that depends on an external script.

Race Conditions

The asynchronous loading techniques from Chapter 4 are tested to show that all of them produce undefined symbol errors when there’s an inline script with code dependencies. ...