Skip to content

Commit 0a09cd5

Browse files
Update article.md
continuing
1 parent 51191e6 commit 0a09cd5

File tree

1 file changed

+28
-36
lines changed

1 file changed

+28
-36
lines changed

2-ui/99-ui-misc/03-event-loop/article.md

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,35 @@
11

22
# Event loop: microtasks e macrotasks
33

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*.
55

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.
77

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.
99

1010
## Event Loop
1111

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).
1513

14+
Questo, è a grandi linee, l'algoritmo del motore:
1615
1. Fino a quando ci sono task:
1716
- eseguili, cominciando da quello meno recente.
1817
2. Rimani in attesa fino a quando non c'è un altro task da eseguire, quindi vai al passo 1.
1918

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.
2120

2221
Esempio di tasks:
2322

2423
- 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 &egrave; quello di fare il dispatch dell'evento `mousemove` ed eseguirne eventuali handlers (gestori).
2625
- Quando è scaduto il tempo per `setTimeout` già schedulato, il task è quello di eseguirne la callback.
2726
- ...e cos&igrave; via.
2827

2928
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).
3029

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.
3231

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):
3433

3534
![](eventLoop.svg)
3635

@@ -54,82 +53,75 @@ Poniamo il caso che abbiamo un task affamato di CPU.
5453
Per esempio, la syntax-highlighting (usata per colorare ed evidenziare gli esempi del codice in questa pagina) è abbastanza pesante per la CPU.
5554
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.
5655

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 &egrave; occupato con l'evidenziatura, non pu&ograve; fare le altre cose relative al DOM, processare gli eventi dell'utente, etc. pu&ograve; persino causare "singhiozzamenti" al pc o addirittura "inchiodarlo", la qual cosa &egrave; inaccettabile.
5857

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.
6059

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`
6261

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&agrave; 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.
6463

6564
```js run
6665
let i = 0;
6766

6867
let start = Date.now();
6968

7069
function count() {
71-
72-
// do a heavy job
70+
// fa un lavoro pesante!
7371
for (let j = 0; j < 1e9; j++) {
7472
i++;
7573
}
76-
77-
alert("Done in " + (Date.now() - start) + 'ms');
74+
alert(`Completato in ${(Date.now() - start)} millisecondi`);
7875
}
7976

8077
count();
8178
```
8279

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".
8481

85-
Let's split the job using nested `setTimeout`:
82+
83+
Dividiamo l'operazione usando un `setTimeout` annidato:
8684

8785
```js run
8886
let i = 0;
8987

9088
let start = Date.now();
9189

9290
function count() {
93-
94-
// do a piece of the heavy job (*)
91+
// fai una parte del lavoro pesante (*)
9592
do {
9693
i++;
9794
} while (i % 1e6 != 0);
9895

9996
if (i == 1e9) {
100-
alert("Done in " + (Date.now() - start) + 'ms');
97+
alert(`Completato in ${(Date.now() - start)} ms`);
10198
} else {
102-
setTimeout(count); // schedule the new call (**)
99+
setTimeout(count); //schedula la nuova chiamata a count (**)
103100
}
104-
105101
}
106-
107102
count();
108103
```
109104

110-
Now the browser interface is fully functional during the "counting" process.
105+
Adesso l'interfaccia del browser &egrave; pienamente funzionante, anche durante il processo di "conteggio".
111106

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:
113108

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&igrave; via.
117112

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 &egrave; 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.
119114

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.
121116

122117
To make them closer, let's make an improvement.
123118

124119
We'll move the scheduling in the beginning of the `count()`:
125120

126121
```js run
127122
let i = 0;
128-
129123
let start = Date.now();
130-
131124
function count() {
132-
133125
// move the scheduling at the beginning
134126
if (i < 1e9 - 1e6) {
135127
setTimeout(count); // schedule the new call

0 commit comments

Comments
 (0)