blocking - head

When the browser encounters a <script> tag without the defer or async attribute, the browser blocks parsing and rendering until the script file is downloaded, parsed and executed. This is by design, as your JavaScript may modify or access the DOM.

This demo includes a <script src="/script.js"/> element in the <head>.

WebPageTest waterfall chart showing three resources. The Start Render mark appears after 4.0 seconds, after script.js is being downloaded, parsed and executed.

The above image is taken from WebPageTest and shows the resources loaded for this page. You should notice that the Start Render mark—denoted by the dark green vertical line—appears after 4.0s, after the script.js file is downloaded, parsed and executed. JavaScript parsing and execution is illustrated by the pink bar.

View Source Code

// index.html
<head>
  <link rel="stylesheet" href="/style.css">
  <script src="/script.js"></script>
</head>

// script.js
// simulate CPU intensive JavaScript execution
sleep(2000);
console.log("Hello world!")

Learn Performance - Render Blocking JavaScript

blocking - head