Cover by Steve Souders

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required