jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor fixes

Browse source
This commit is contained in:
Ilya Kantor 2020-09-05 16:37:04 +03:00
parent 2f4747be58
commit c0d638a127
1 changed files with 42 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

80
2-ui/5-loading/02-script-async-defer/article.md
View file

@ -37,7 +37,7 @@ Luckily, there are two `<script>` attributes that solve the problem for us: `def
## defer
The `defer` attribute tells the browser that it should go on working with the page, and load the script "in background", then run the script when it loads.
The `defer` attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads "in the background", and then runs when the DOM is fully built.
Here's the same example as above, but with `defer`:
@ -50,16 +50,18 @@ Here's the same example as above, but with `defer`:
<p>...content after script...</p>
```
- Scripts with `defer` never block the page.
- Scripts with `defer` always execute when the DOM is ready, but before `DOMContentLoaded` event.
In other words:
The following example demonstrates that:
- 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
<p>...content before scripts...</p>
<script>
document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!")); // (2)
document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
</script>
<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
@ -68,40 +70,44 @@ The following example demonstrates that:
```
1. The page content shows up immediately.
2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded and executed.
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.
**Deferred scripts keep their relative order, just like regular scripts.**
So, if we have a long script first, and then a smaller one, then the latter one waits.
Let's say, we have two deferred scripts: the `long.js` and then `small.js`:
```html
<script defer src="https://javascript.info/article/script-async-defer/long.js"></script>
<script defer src="https://javascript.info/article/script-async-defer/small.js"></script>
```
```smart header="The small script downloads first, runs second"
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 makes it first.
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 specification requires scripts to execute in the document order, so it waits for `long.js` to execute.
```
...But the `defer` atribute, 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 `<script>` tag has no `src`.
```
## async
The `async` attribute is somewhat like `defer`. It also makes the script non-blocking. But it has important differences in the behavior.
The `async` attribute means that a script is completely independent:
- The page doesn't wait for async scripts, the contents are processed and displayed.
- The browser doesn't block on `async` scripts (like `defer`).
- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
- `DOMContentLoaded` and async scripts don't wait for each other:
- `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete)
- ...or after an async script (if an async script is short or was in HTTP-cache)
- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
In other words, `async` scripts load in the background and run when ready. The DOM and other scripts don't wait for them, and they don't wait for anything. A fully independent script that runs when loaded. As simple, at it can get, right?
So, if we have several `async` scripts, they may execute in any order. Whatever loads first -- runs first:
Here's an example similar to what we've seen with `defer`: two scripts `long.js` and `small.js`, but now with `async` instead of `defer`.
They don't wait for each other. Whatever loads first (probably `small.js`) -- runs first:
```html run height=100
<p>...content before scripts...</p>
@ -116,9 +122,9 @@ So, if we have several `async` scripts, they may execute in any order. Whatever
<p>...content after scripts...</p>
```
1. The page content shows up immediately: `async` doesn't block it.
2. `DOMContentLoaded` may happen both before and after `async`, no guarantees here.
3. Async scripts don't wait for each other. A smaller script `small.js` goes second, but probably loads before `long.js`, so runs first. That's called a "load-first" order.
- 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:
@ -127,10 +133,11 @@ Async scripts are great when we integrate an independent third-party script into
<script async src="https://google-analytics.com/analytics.js"></script>
```
## Dynamic scripts
There's one more important way of adding a script to the page.
We can also add a script dynamically using JavaScript:
We can create a script and append it to the document dynamically using JavaScript:
```js run
let script = document.createElement('script');
@ -146,20 +153,11 @@ That is:
- They don't wait for anything, nothing waits for them.
- The script that loads first -- runs first ("load-first" order).
This can be changed if we explicitly set `script.async=true`. Then scripts will be executed in the document order, just like `defer`.
```js run
let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
*!*
script.async = false;
*/!*
document.body.append(script);
```
For example, here we add two scripts. Without `script.async=false` they would execute in load-first order (the `small.js` probably first). But with that flag the order is "as in the document":
In this example, `loadScript(src)` function adds a script and also sets `async` to `false`.
So `long.js` always runs first (as it's added first):
```js run
function loadScript(src) {
@ -174,6 +172,10 @@ loadScript("/article/script-async-defer/long.js");
loadScript("/article/script-async-defer/small.js");
```
Without `script.async=false`, scripts would execute in default, load-first order (the `small.js` probably first).
Again, as with the `defer`, the order matters if we'd like to load a library and then another script that depends on it.
## Summary
@ -186,12 +188,14 @@ But there are also essential differences between them:
| `async` | *Load-first order*. Their document order doesn't matter -- which loads first | Irrelevant. May load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. |
| `defer` | *Document order* (as they go in the document). | Execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. |
In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important.
And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.
```warn header="Page without scripts should be usable"
Please note that if you're using `defer`, then the page is visible *before* the script loads.
Please note: if you're using `defer` or `async`, then user will see the the page *before* the script loads.
So the user may read the page, but some graphical components are probably not ready yet.
In such case, some graphical components are probably not initialized yet.
There should be "loading" indications in the proper places, and disabled buttons should show as such, so the user can clearly see what's ready and what's not.
Don't forget to put "loading" indication and disable buttons that aren't functional yet. Let the user clearly see what he can do on the page, and what's still getting ready.
```
In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.