O'Reilly logo

Async JavaScript by Trevor Burnham

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

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 right should load right away. Scripts ...

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