Skip to content

Commit 5f095cc

Browse files
committed
improvements
1 parent 5c6a8ec commit 5f095cc

File tree

2 files changed

+9
-30
lines changed

2 files changed

+9
-30
lines changed

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ There are some workarounds to that. For instance, we can put a script at the bot
2929
</body>
3030
```
3131

32-
But this solution is far from perfect. For example, the browser actually 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.
32+
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.
3333

34-
Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and far-from-perfect mobile connectivity.
34+
Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and use far-from-perfect mobile internet.
3535

36-
Luckily, there are two `<script>` attributes that solve the problem for us: `defer` and `async`
36+
Luckily, there are two `<script>` attributes that solve the problem for us: `defer` and `async`.
3737

3838
## defer
3939

@@ -86,7 +86,7 @@ But the specification requires scripts to execute in the document order, so it w
8686
```
8787

8888
```smart header="The `defer` attribute is only for external scripts"
89-
The `defer` attribute is ignored if the script has no `src`.
89+
The `defer` attribute is ignored if the `<script>` tag has no `src`.
9090
```
9191
9292
@@ -120,16 +120,17 @@ So, if we have several `async` scripts, they may execute in any order. Whatever
120120
2. `DOMContentLoaded` may happen both before and after `async`, no guarantees here.
121121
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.
122122

123-
Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on.
123+
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:
124124

125125
```html
126+
<!-- Google Analytics is usually added like this -->
126127
<script async src="https://google-analytics.com/analytics.js"></script>
127128
```
128129

129130

130131
## Dynamic scripts
131132

132-
We can also create a script dynamically using JavaScript:
133+
We can also add a script dynamically using JavaScript:
133134

134135
```js run
135136
let script = document.createElement('script');
@@ -145,7 +146,7 @@ That is:
145146
- They don't wait for anything, nothing waits for them.
146147
- The script that loads first -- runs first ("load-first" order).
147148

148-
We can change the load-first order into the document order by explicitly setting `async` to `false`:
149+
We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`:
149150

150151
```js run
151152
let script = document.createElement('script');
@@ -191,7 +192,4 @@ Please note that if you're using `defer`, then the page is visible before the sc
191192
192193
So, buttons should be disabled by CSS or by other means, to let the user
193194
194-
In practice, `defer` is used for scripts that need DOM and/or their relative execution order is important.
195-
196-
197-
So `async` is used for independent scripts, like counters or ads, that don't need to access page content. And their relative execution order does not matter.
195+
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.

2-ui/5-loading/02-script-async-defer/window-onbeforeunload.view/index.html

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)