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
+6-6
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ The general algorithm of the engine:
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. The JavaScript engine does nothing most of the time, it only runs if a script/handler/event activates.
20
+
That's a formalization of 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
@@ -30,19 +30,19 @@ Tasks are set -- the engine handles them -- then waits for more tasks (while sle
30
30
31
31
It may happen that a task comes while the engine is busy, then it's enqueued.
32
32
33
-
The tasks form a queue, so-called "macrotask queue" (v8 term):
33
+
The tasks form a queue, the so-called "macrotask queue" (v8 term):
34
34
35
35

36
36
37
-
For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above.
37
+
For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated in the picture above.
38
38
39
-
Tasks from the queue are processed on "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
39
+
Tasks from the queue are processed on a "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
40
40
41
41
So far, quite simple, right?
42
42
43
43
Two more details:
44
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, such as processing 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 an infinite loop.
45
+
2. If a task takes too long, the browser can't do other tasks, such as processing user events. So after some 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 an infinite loop.
46
46
47
47
That was the theory. Now let's see how we can apply that knowledge.
48
48
@@ -54,7 +54,7 @@ For example, syntax-highlighting (used to colorize code examples on this page) i
54
54
55
55
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
56
57
-
We can avoid problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
57
+
We can avoid problems by splitting the big task into pieces. Highlight the first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
58
58
59
59
To demonstrate this approach, for the sake of simplicity, instead of text-highlighting, let's take a function that counts from `1` to `1000000000`.
0 commit comments