Skip to content

Commit 0da46d1

Browse files
longo-andrealongo-andrea
authored
Merge pull request #313 from longo-andrea/review/async-defer
Review Scripts: async, defer
2 parents b029232 + f6e8dff commit 0da46d1

File tree

3 files changed

+37
-37
lines changed

3 files changed

+37
-37
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ Questo conduce a 2 importanti problematiche:
1515

1616
<script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
1717

18-
<!-- This isn't visible until the script loads -->
18+
<!-- Questo non sarà visibile finché non sarà terminato il caricamento dello script -->
1919
<p>...contenuto dopo lo script...</p>
2020
```
2121

22-
Ci sono alcuni accorgimenti per avere il comportamento desiderato. Per esempio, possiamo mettere lo script in fondo alla pagina. In questo modo vedrà gli elementi sopra di esso e non bloccherà la visualizzazione della pagina:
22+
Possiamo però applicare alcuni accorgimenti per ottenere il comportamento desiderato. Per esempio, possiamo mettere lo script in fondo alla pagina. In questo modo vedrà gli elementi sopra di esso e non bloccherà la visualizzazione della pagina:
2323

2424
```html
2525
<body>
@@ -31,7 +31,7 @@ Ci sono alcuni accorgimenti per avere il comportamento desiderato. Per esempio,
3131

3232
Ma questa soluzione è lontana dall'essere perfetta. Per esempio, il browser si accorge dello script (e può iniziarlo a scaricare) solo dopo che è stato scaricato tutto il documento HTML. Per pagine HTML molto lunghe ci potrebbe essere un notevole ritardo nel caricamento dello script.
3333

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. Queste cose sono invisibili per persone che utilizzano una connessione molto veloce ma molte persone nel mondo hanno ancora una connessione Internet più lenta e utilizzano connessioni mobile molto scarse.
34+
Queste cose sono invisibili per persone che utilizzano una connessione molto veloce, ma molte persone nel mondo hanno ancora una connessione Internet più lenta e utilizzano connessioni mobili molto scarse.
3535

3636
Fortunatamente, ci sono 2 attributi del tag `<script>` che risolvono il problema per noi: `defer` e `async`.
3737

@@ -47,7 +47,7 @@ Di seguito lo stesso esempio di sopra, ma con `defer`:
4747

4848
<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
4949

50-
<!-- visible immediately -->
50+
<!-- visibile immediatamente -->
5151
<p>...contenuto dopo lo script...</p>
5252
```
5353

@@ -100,7 +100,7 @@ L'attributo `async` indica che uno script è completamente indipendente:
100100
- ...o dopo uno script `async` (se lo script è corto o era in cache)
101101
- Anche gli altri script non aspettano il caricamento degli script `async`, e gli script `async` non aspettano il caricamento degli altri script.
102102
103-
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, as it can get, right?
103+
In altre parole, gli script `async` vengono caricati in background ed eseguiti quando pronti. Il DOM e gli altri script non restano in attesa che questi vengano caricati. Avremo quindi un script completamente indipendente che verrà eseguito al termine del caricamento. Piuttosto semplice, vero?
104104
105105
Quindi, se abbiamo parecchi script `async`, potrebbero essere eseguiti in qualunque ordine. Qualunque di essi viene caricato prima -- viene eseguito prima:
106106
@@ -131,7 +131,7 @@ Gli script async sono ottimali quando dobbiamo integrare uno script di terze par
131131

132132
## Script dinamici
133133

134-
Possiamo anche aggiungere uno script dinamicamente usando Javascript:
134+
Possiamo anche aggiungere uno script dinamicamente usando JavaScript:
135135

136136
```js run
137137
let script = document.createElement('script');

‎2-ui/5-loading/02-script-async-defer/long.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
2-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
3-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
4-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
5-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
6-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
7-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
8-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
9-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
10-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
11-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
12-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
13-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
14-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
15-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
16-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
17-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
18-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
19-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
20-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
21-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
22-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
23-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
24-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
25-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
26-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
27-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
28-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
29-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
30-
// ...long js... ...long js... ...long js... ...long js... ...long js... ...long js...
1+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
2+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
3+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
4+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
5+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
6+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
7+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
8+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
9+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
10+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
11+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
12+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
13+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
14+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
15+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
16+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
17+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
18+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
19+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
20+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
21+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
22+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
23+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
24+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
25+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
26+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
27+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
28+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
29+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
30+
// ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo... ...js lungo...
3131

3232
alert("Long script loaded");

‎2-ui/5-loading/02-script-async-defer/small.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
// ...small js...
1+
// ...js corto...
22

33
alert("Small script loaded");

0 commit comments

Comments
 (0)