Skip to content

Commit 475899e

Browse files
authored
Update article.md
1 parent 0b9bc2f commit 475899e

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The general algorithm of the engine:
1717
- execute them, starting with the oldest task.
1818
2. Sleep until a task appears, then go to 1.
1919

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

2222
Examples of tasks:
2323

@@ -30,19 +30,19 @@ Tasks are set -- the engine handles them -- then waits for more tasks (while sle
3030

3131
It may happen that a task comes while the engine is busy, then it's enqueued.
3232

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

3535
![](eventLoop.svg)
3636

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

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

4141
So far, quite simple, right?
4242

4343
Two more details:
4444
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.
4646

4747
That was the theory. Now let's see how we can apply that knowledge.
4848

@@ -54,7 +54,7 @@ For example, syntax-highlighting (used to colorize code examples on this page) i
5454

5555
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.
5656

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

5959
To demonstrate this approach, for the sake of simplicity, instead of text-highlighting, let's take a function that counts from `1` to `1000000000`.
6060

0 commit comments

Comments
 (0)