Chapter
6
Async Script Loading
In the beginning, there was this:
| | <script src="allMyClientSideCode.js"></script> |
And it was…not great. “Where should it go?” developers wondered. “Up in the <head>? Or down in the <body>?” For script-heavy sites, both options lead to misery. A large script in the <head> delays all page rendering, giving the user a “White Screen of Death”[54] until the script loads completely. But a large script at the end of the <body> gives the user a lifeless, static page littered with nonworking controls and empty boxes where client-side rendering is supposed to occur.
The ideal solution to this problem is to triage your scripts; those that are needed for the page to look and feel right should load right away. Scripts that can wait should. But what’s the right way of delaying those scripts while ensuring that they’re available when called?
In the last few years, several technologies aimed at solving this problem have become widespread. In this chapter, we’ll look at how HTML5’s async and defer attributes can help. We’ll also look at two popular script-loading libraries: yepnope and Require.js.