Lesson 13 · How browsers use HTML

Loading scripts: defer and async

A browser reads HTML from top to bottom on one main thread, building the DOM as it goes. A plain <script src> tag stops that reading until the JavaScript file has downloaded and run. Follow one five-line page and one tiny app.js through three page loads: plain, defer and async. Watch the timeline, the DOM tree and the console to see when the script runs, what it can find, and when DOMContentLoaded fires.

12 min11 steps5 questionsAdvanced

Fig 13 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01A page has <script src="app.js"></script> in the head, before the <h1>. app.js runs document.querySelector("h1"). What does it get?

A plain script runs as soon as it has downloaded, while the parser is stopped at its tag. The h1 comes later in the file, so it is not in the DOM yet, and querySelector returns null when nothing matches.

02Which is true of scripts with the defer attribute?

defer downloads in parallel with parsing. The scripts wait until parsing has finished, then run in file order, and DOMContentLoaded fires after they have run.

03Two scripts, a.js and b.js, both have async. b.js finishes downloading first. Which runs first?

An async script runs as soon as it is available. Order in the file does not matter, so whichever arrives first runs first.

04On the figure's timeline, DOMContentLoaded fires at 11 for the plain script and 8 for defer. Why is the plain one later?

Both downloads take the same time. With the plain script the parser waits for it, so the rest of the page is parsed later; with defer the parser keeps reading while the file downloads.

05What does a script with type="module" and no other attribute do by default?

Module scripts are deferred automatically. Adding async to a module makes it run as soon as it and its imports are ready.

Key terms

Glossary

Parser: The part of the browser that reads HTML text from top to bottom and turns each tag into a node in the DOM.
DOM: Document Object Model: the tree of nodes the browser builds from the HTML. JavaScript reads and changes the page through it.
Main thread: The single worker where the browser parses HTML and runs a page's JavaScript, one job at a time.
Classic script: A <script> without type="module". With src and no async or defer, it stops the parser until it has downloaded and run.
defer: A script attribute: download in parallel, then run after the document is parsed, in file order, before DOMContentLoaded.
async: A script attribute: download in parallel and run as soon as the file is available, in whatever order the files arrive.
DOMContentLoaded: An event fired when the HTML is fully parsed and all deferred scripts have run. It does not wait for async scripts, images or stylesheets.
Module script: A script with type="module". It can use import and export, and is deferred by default.

Fine print

Notes and sources

The times on the timeline are made-up round numbers. They show the order of events; real times depend on the network and the page.
Real browsers also run a "preload scanner" that looks ahead in the file and starts downloads early, even while the parser is blocked. It speeds downloads up but does not change when scripts run.
A plain script blocks parsing: nothing after it becomes part of the DOM until it has run. What was already parsed can still be shown on screen.
async and defer only change classic scripts that have a src. An inline classic script (code written between the tags) always runs at once. async does work on inline module scripts.
The file on the card is real HTML. Save it with app.js next to it, open it from a local web server and the console shows null; add defer and it shows the h1 element.

Quiz Unlocks after the last step.