Web Performance Workshop

Async/Defer JavaScript

script

• The HTML file will be parsed until the script file is hit
• At that point parsing will stop and a request will be made to fetch the file (if it’s external)
• The script will then be executed before parsing is resumed
• Comment on preload scanner

async

• Downloads the file during HTML parsing
• Execution does not block DOM or CSSOM construction

defer

• Downloads the file during HTML parsing
• Will only execute the script after the parser has completed
• Defer scripts are also guarenteed to execute in the order that they appear in the document

Example: prism.js

<script src="javascripts/prism.js" defer>
<script src="javascripts/analytics.js" async>

Main resource: here