...content before script...
...content after script...
``` There are some workarounds to that. For instance, we can put a script at the bottom of the page. Then it can see elements above it, and it doesn't block the page content from showing: ```html ...all content is above the script... ``` But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay. Such things are invisible for people using very fast connections, but many people in the world still have slow internet speeds and use a far-from-perfect mobile internet connection. Luckily, there are two `...content after script...
``` In other words: - Scripts with `defer` never block the page. - Scripts with `defer` always execute when the DOM is ready (but before `DOMContentLoaded` event). The following example demonstrates the second part: ```html run height=100...content before scripts...
...content after scripts...
``` 1. The page content shows up immediately. 2. `DOMContentLoaded` event handler waits for the deferred script. It only triggers when the script is downloaded and executed. **Deferred scripts keep their relative order, just like regular scripts.** Let's say, we have two deferred scripts: the `long.js` and then `small.js`: ```html ``` Browsers scan the page for scripts and download them in parallel, to improve performance. So in the example above both scripts download in parallel. The `small.js` probably finishes first. ...But the `defer` attribute, besides telling the browser "not to block", ensures that the relative order is kept. So even though `small.js` loads first, it still waits and runs after `long.js` executes. That may be important for cases when we need to load a JavaScript library and then a script that depends on it. ```smart header="The `defer` attribute is only for external scripts" The `defer` attribute is ignored if the `...content after scripts...
``` - The page content shows up immediately: `async` doesn't block it. - `DOMContentLoaded` may happen both before and after `async`, no guarantees here. - A smaller script `small.js` goes second, but probably loads before `long.js`, so `small.js` runs first. Although, it might be that `long.js` loads first, if cached, then it runs first. In other words, async scripts run in the "load-first" order. Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on, as they don't depend on our scripts, and our scripts shouldn't wait for them: ```html ``` ```smart header="The `async` attribute is only for external scripts" Just like `defer`, the `async` attribute is ignored if the `