The JavaScript Dilemma

JavaScript allows us to modify just about every aspect of the page: content, styling, and its behavior to user interactions. However, JavaScript can also block DOM construction and delay when the page is rendered.

• By default all JavaScript is parser blocking and the browser doesn’t know what the script is planning to do on the page, hence it has to assume the worst case scenario and block the parser.
• However, what if we could signal to the browser and tell it that the script does not need to be executed at the exact point where it is referenced in the document?
• It’s pretty simple, we can mark our script as async.

<script src="app.js" async></script>

The JavaScript Redemption

Parser-blocking (external) JavaScript:

Async (external) JavaScript: