defer, async
Attributes of an external `<script>` that load it without stopping the page from being parsed; they differ in when the script runs.
Syntax
<script src="app.js" defer></script>Parameters
| Parameter | Type | Description |
|---|---|---|
| defer | boolean | Run after the whole HTML is parsed, in the order the scripts appear in the page. |
| async | boolean | Run as soon as the file arrives, in any order, possibly before the page is parsed. |
Examples
A defer script can safely use elements that come after it:
<script defer src="data:text/javascript,document.getElementById('msg').textContent='Set by a deferred script'"></script>
<p id="msg">Waiting…</p>Notes
Choose defer for your own code: it keeps the order and the DOM is ready. Choose async for independent scripts like analytics, which do not depend on the page or on other scripts. Both work only with src; on an inline script they are ignored. Module scripts (type="module") behave like defer by default.
See also
- <script> — Adds or embeds JavaScript; `<noscript>` shows fallback content when scripts are off.
- <head> — The service part of the page: encoding, tab title, linked styles and scripts.
- fetchpriority — A hint about how urgent a resource is compared with others of the same kind — for example, to load the main banner before other images.
In the tutorial
- Document structure — The skeleton of an HTML page — doctype, html, head and body, the encoding, the tab title, viewport and your first index.html file.