You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/99-ui-misc/03-event-loop/article.md
+28-36Lines changed: 28 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,36 +1,35 @@
1
1
2
2
# Event loop: microtasks e macrotasks
3
3
4
-
Il flusso di esecuzione di Javascript, così come quello di Node.js, è basato su un*event loop*.
4
+
Il flusso di esecuzione di Javascript ed anche di Node.js, sono basati sull'*event loop*.
5
5
6
-
Comprendere come un event loop lavora è importante per le ottimizzazioni, e a volte per creare delle architetture migliori.
6
+
Comprendere come un event loop lavora è importante per le ottimizzazioni, ed a volte, anche per creare delle architetture migliori.
7
7
8
-
In questo capitolo, affronteremo i dettagli teorici su come funzionano, quindi, vedremo alcune applicazioni pratiche.
8
+
In questo capitolo affronteremo i dettagli teorici su come funziona, dopodichè prenderemo in esame alcune applicazioni pratiche.
9
9
10
10
## Event Loop
11
11
12
-
Il concetto di *event loop* è molto semplice. Esiste un loop infinito nel quale il motore di Javascript rimane in attesa di un task (operazione) da eseguire, lo esegue, dopodichè si rimette in rimane in sleep (inattivo, dormiente, ma pronto per essere eseguito) per altri tasks.
13
-
14
-
Questo, l'algoritmo generico del motore:
12
+
Il concetto di *event loop*è molto semplice. Esiste un loop infinito nel quale il motore di Javascript rimane in attesa di un task (operazione) da eseguire, lo esegue, dopodichè si rimette in attesa per altri tasks. (in sleep, inattivo o dormiente, ma pronto per essere di nuovo richiamato).
15
13
14
+
Questo, è a grandi linee, l'algoritmo del motore:
16
15
1. Fino a quando ci sono task:
17
16
- eseguili, cominciando da quello meno recente.
18
17
2. Rimani in attesa fino a quando non c'è un altro task da eseguire, quindi vai al passo 1.
19
18
20
-
Questa è una esposizione di quello che vediamo quando navighiamo una pagina. Il motore di Javascript non fa nulla per la maggiorparte del tempo, va in esecuzione quando si attiva uno script/handler/evento.
19
+
Questa è una esposizione di quello che vediamo quando navighiamo una pagina. Il motore di Javascript non fa nulla per la maggior parte del tempo, e va in esecuzione quando si attiva uno script/handler/evento.
21
20
22
21
Esempio di tasks:
23
22
24
23
- Quando uno script esterno `<script src="...">` viene caricato (load), il task è quello di eseguirlo.
25
-
- Quando un utente sposta il puntatore del mouse, il task è quello di fare il dispatch dell'evento `mousemove` ed eseguirne eventuali handlers (gestori).
24
+
- Quando un utente sposta il puntatore del mouse, il task è quello di fare il dispatch dell'evento `mousemove` ed eseguirne eventuali handlers (gestori).
26
25
- Quando è scaduto il tempo per `setTimeout` già schedulato, il task è quello di eseguirne la callback.
27
26
- ...e così via.
28
27
29
28
I task vengono impostati -- il motore li gestisce -- quindi rimane in attesa per altri tasks (nel frattempo rimane in sleep, consumando risorse della CPU prossime allo zero).
30
29
31
-
Potrebbe succedere che mentre il motore è occupato arrivi un task, in questo caso, questo viene messo in coda.
30
+
Però potrebbe succedere che mentre il motore è occupato, arrivi un task, in questo caso, questo viene messo in coda.
32
31
33
-
I task formano una coda, la cosiddetta "macrotask queue" (termine di v8, il motore di Javascript di Chrome e di Node.js):
32
+
I task formano una coda, la cosiddetta "macrotask queue" (termine mutuato V8, il motore Javascript di Chrome e di Node.js):
34
33
35
34

36
35
@@ -54,82 +53,75 @@ Poniamo il caso che abbiamo un task affamato di CPU.
54
53
Per esempio, la syntax-highlighting (usata per colorare ed evidenziare gli esempi del codice in questa pagina) è abbastanza pesante per la CPU.
55
54
Per evidenziare il codice, compie delle analisi, crea molti elementi colorati, e li aggiunge al documento -- un testo di grosse dimensioni può impiegare molto tempo.
56
55
57
-
While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hiccup" or even "hang" for a bit, which is unacceptable.
56
+
Mentre il motore è occupato con l'evidenziatura, non può fare le altre cose relative al DOM, processare gli eventi dell'utente, etc. può persino causare "singhiozzamenti" al pc o addirittura "inchiodarlo", la qual cosa è inaccettabile.
58
57
59
-
We can evade problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) another 100 lines, and so on.
58
+
Possiamo quindi tirarci fuori da questo tipo di problemi, spezzettando i task grossi in piccoli pezzi. Evidenzia le prime 100 righe, quindi schedula un `setTimeout` (con zero-delay) con altre 100 righe, e così via.
60
59
61
-
To demonstrate the approach, for the sake of simplicity, instead of syntax-highlighting let's take a function that counts from `1`to`1000000000`.
60
+
Per dimostrare questo tipo di approccio, per amore della semplicità, invece di evidenziare una sintassi, prendiamo una funzione che conti i numeri da `1`a`1000000000`
62
61
63
-
If you run the code below, the engine will "hang" for some time. For server-side JS that's clearly noticeable, and if you are running it in-browser, then try to click other buttons on the page -- you'll see that no other events get handled until the counting finishes.
62
+
Se esegui il codice sotto, il motore si inchioderà per qualche istante. Per il JS server-side (lato server) questo è chiaramente visibile, e se lo stai eseguendo nella finestra del browser, prova a cliccare gli altri pulsanti -- potrei notare che non verrà gestito nessun altro evento fino a quando il conto non sarà terminato.
64
63
65
64
```js run
66
65
let i =0;
67
66
68
67
let start =Date.now();
69
68
70
69
functioncount() {
71
-
72
-
// do a heavy job
70
+
// fa un lavoro pesante!
73
71
for (let j =0; j <1e9; j++) {
74
72
i++;
75
73
}
76
-
77
-
alert("Done in "+ (Date.now() - start) +'ms');
74
+
alert(`Completato in ${(Date.now() - start)} millisecondi`);
78
75
}
79
76
80
77
count();
81
78
```
82
79
83
-
The browser may even show "the script takes too long" warning.
80
+
Il browser potrebbe anche mostrare l'avviso "lo script sta impiegando troppo tempo" the script takes too long".
84
81
85
-
Let's split the job using nested `setTimeout`:
82
+
83
+
Dividiamo l'operazione usando un `setTimeout` annidato:
86
84
87
85
```js run
88
86
let i =0;
89
87
90
88
let start =Date.now();
91
89
92
90
functioncount() {
93
-
94
-
// do a piece of the heavy job (*)
91
+
// fai una parte del lavoro pesante (*)
95
92
do {
96
93
i++;
97
94
} while (i %1e6!=0);
98
95
99
96
if (i ==1e9) {
100
-
alert("Done in "+(Date.now() - start)+'ms');
97
+
alert(`Completato in ${(Date.now() - start)} ms`);
101
98
} else {
102
-
setTimeout(count); // schedule the new call (**)
99
+
setTimeout(count); //schedula la nuova chiamata a count (**)
103
100
}
104
-
105
101
}
106
-
107
102
count();
108
103
```
109
104
110
-
Now the browser interface is fully functional during the "counting" process.
105
+
Adesso l'interfaccia del browser è pienamente funzionante, anche durante il processo di "conteggio".
111
106
112
-
A single run of`count`does a part of the job `(*)`, and then re-schedules itself`(**)`if needed:
107
+
Una singola esecuzione di`count`fa una parte dell'operazione `(*)`, e rischedula se stessa`(**)`se necessario:
113
108
114
-
1.First run counts: `i=1...1000000`.
115
-
2.Second run counts: `i=1000001..2000000`.
116
-
3. ...and so on.
109
+
1.La prima esecuzione conta: `i=1...1000000`.
110
+
2.La seconda esecuzione conta: `i=1000001..2000000`.
111
+
3. ...e così via.
117
112
118
-
Now, if a new side task (e.g. `onclick` event) appears while the engine is busy executing part 1, it gets queued and then executes when part 1 finished, before the next part. Periodic returns to event loop between `count`executions provide just enough "air" for the JavaScript engine to do something else, to react on other user actions.
113
+
Ora, se arriva un nuovo task da eseguire mentre il motore è occupato ad eseguire il passo 1 (ad esempio un evento `onclick`), quest'ultimo viene messo in coda e viene eseguito subito dopo il completamento del passo 1, e subito prima del passo successivo. Questi periodici "ritorni" all'event loop tra una esecuzione di `count`e l'altra, fornisce abbastanza "aria" al motore Javascript per occuparsi di qualcos'altro, ad esempio per reagire alle azioni degli utenti.
119
114
120
-
The notable thing is that both variants -- with and without splitting the job by `setTimeout` -- are comparable in speed. There's no much difference in the overall counting time.
115
+
La cosa ragguardevole è che entrambe le varianti -- con e senza la divsione del lavoro di `setTimeout` -- sono comparabili in termini di tempo. Complessivamente, non esiste molta differenza nel tempo di conteggio.
121
116
122
117
To make them closer, let's make an improvement.
123
118
124
119
We'll move the scheduling in the beginning of the `count()`:
0 commit comments