Resource Loading
async
The script is loaded in parallel with HTML and is executed immediately after loading, without waiting for parsing to finish. Execution order is not guaranteed. Used for external independent scripts (analytics, advertising).
<script src="analytics.js" async></script>defer
The script is loaded in parallel, but is executed after HTML parsing is complete. All defer scripts are executed in the order they were declared. They run before the DOMContentLoaded event. Suitable for main scripts interacting with the DOM.
<script src="app.js" defer></script>preload
An instruction for the browser to start loading in advance an important resource that will be needed in the near future (fonts, styles, images, scripts). Does not execute or apply the resource automatically — only loads it. Used in <link> with rel="preload" and the as attribute.
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>prefetch
Allows loading resources in advance that might be needed later (for example, on the next page or during the next action). Has a low priority and does not block current rendering. Used for optimizing transitions between pages.
<link rel="prefetch" href="next-page.js" as="script">| Attribute / Directive | When Loaded | When Executed / Used | Main Purpose |
|---|---|---|---|
async | In parallel with HTML | Immediately after loading | Independent scripts |
defer | In parallel with HTML | After parsing, before DOMContentLoaded | Main DOM scripts |
preload | Immediately (high priority) | When accessing the resource | Preparation of critical resources |
prefetch | Later (low priority) | In the future, upon transition | Preloading for the next page |