Chapter 6Async 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 ...

Get Async JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.