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
+9-9
Original file line number
Diff line number
Diff line change
@@ -9,15 +9,15 @@ In this chapter we first cover theoretical details about how things work, and th
9
9
10
10
## Event Loop
11
11
12
-
The concept of *event loop* is very simple. There's an endless loop, when JavaScript engine waits for tasks, executes them and then sleeps waiting for more tasks.
12
+
The *event loop*concept is very simple. There's an endless loop, when the JavaScript engine waits for tasks, executes them and then sleeps, waiting for more tasks.
13
13
14
14
The general algorithm of the engine:
15
15
16
16
1. While there are tasks:
17
17
- execute them, starting with the oldest task.
18
18
2. Sleep until a task appears, then go to 1.
19
19
20
-
That's a formalization for what we see when browsing a page. JavaScript engine does nothing most of the time, only runs if a script/handler/event activates.
20
+
That's a formalization for what we see when browsing a page. The JavaScript engine does nothing most of the time, it only runs if a script/handler/event activates.
21
21
22
22
Examples of tasks:
23
23
@@ -41,10 +41,10 @@ Tasks from the queue are processed on "first come – first served" basis. When
41
41
So far, quite simple, right?
42
42
43
43
Two more details:
44
-
1. Rendering never happens while the engine executes a task. Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is complete.
45
-
2. If a task takes too long, the browser can't do other tasks, process user events, so after a time it raises an alert like "Page Unresponsive" suggesting to kill the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to infinite loop.
44
+
1. Rendering never happens while the engine executes a task. It doesn't matter if the task takes a long time. Changes to the DOM are painted only after the task is complete.
45
+
2. If a task takes too long, the browser can't do other tasks, process user events, so after a time it raises an alert like "Page Unresponsive" suggesting killing the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to infinite loop.
46
46
47
-
That was a theory. Now let's see how we can apply that knowledge.
47
+
That was the theory. Now let's see how we can apply that knowledge.
48
48
49
49
## Use-case 1: splitting CPU-hungry tasks
50
50
@@ -160,7 +160,7 @@ Finally, we've split a CPU-hungry task into parts - now it doesn't block the use
160
160
161
161
Another benefit of splitting heavy tasks for browser scripts is that we can show progress indication.
162
162
163
-
Usually the browser renders after the currently running code is complete. Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is finished.
163
+
Usually the browser renders after the currently running code is complete. It doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is finished.
164
164
165
165
On one hand, that's great, because our function may create many elements, add them one-by-one to the document and change their styles -- the visitor won't see any "intermediate", unfinished state. An important thing, right?
166
166
@@ -238,7 +238,7 @@ menu.onclick = function() {
238
238
239
239
## Macrotasks and Microtasks
240
240
241
-
Along with *macrotasks*, described in this chapter, there exist*microtasks*, mentioned in the chapter <info:microtask-queue>.
241
+
Along with *macrotasks*, described in this chapter, there are*microtasks*, mentioned in the chapter <info:microtask-queue>.
242
242
243
243
Microtasks come solely from our code. They are usually created by promises: an execution of `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's another form of promise handling.
244
244
@@ -303,7 +303,7 @@ Here's an example with "counting progress bar", similar to the one shown previou
303
303
304
304
## Summary
305
305
306
-
The more detailed algorithm of the event loop (though still simplified compare to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
306
+
A more detailed event loop algorithm (though still simplified compared to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
307
307
308
308
1. Dequeue and run the oldest task from the *macrotask* queue (e.g. "script").
309
309
2. Execute all *microtasks*:
@@ -316,7 +316,7 @@ The more detailed algorithm of the event loop (though still simplified compare t
316
316
To schedule a new *macrotask*:
317
317
- Use zero delayed `setTimeout(f)`.
318
318
319
-
That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react on user events and show progress between them.
319
+
That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react to user events and show progress between them.
320
320
321
321
Also, used in event handlers to schedule an action after the event is fully handled (bubbling done).
0 commit comments