The origin of the event loop

To talk about the cycle of events, we need to ask two questions:

  • What is an event loop?
  • Why is there an event loop?

We all know that JavaScript is a single-threaded language, and single-threaded means that only one task can be executed at a time, and only sequentially, which can cause some serious problems. For example, to perform a network request, it takes a certain amount of time to get data from the background. If the request takes 200ms, the page will be blocked for 200ms, which is not a good user experience. To solve this problem, JavaScript introduces asynchronous tasks, which are called synchronous tasks.

** Synchronous tasks: ** tasks to be executed immediately ** Asynchronous tasks: ** Tasks that will not be executed immediately

In what order are synchronous tasks, asynchronous tasks, and page rendering performed in the browser? In fact, the execution order of these tasks is specified by Javascript, and this specification is called Event Loop.

Task queue

We know that asynchronous tasks do not execute immediately and need to be stored and wait for execution, while the place for asynchronous tasks is the task queue.

Asynchronous tasks are also divided into macrotasks and microtasks, which are stored in the macrotask queue and microtask queue respectively. We will explain the difference between macrotasks and microtasks later.

  • Macro tasks: Script (global tasks), setTimeout, setInterval, setImmediate, I/O operations
  • Microtasks: Process. nextTick, Promise, MutationObserver

Simulated event loop

Macro tasks encountered during code execution are placed in the macro task queue, and microtasks encountered are placed in the microtask queue. We said that the event loop is a rule for executing synchronous and asynchronous tasks, and this rule is:

  1. Execute a macro task from the macro task queue (the first macro task is always script)
  2. Execute all the microtasks in the microtask queue
  3. Page rendering

Let’s look at an example based on this rule:

setTimeout(function() {
    console.log(1);
}, 0);
new Promise(function (resolve, reject) {
    resolve(2);
    console.log(0)
}).then(console.log);
console.log(3);
Copy the code

As a rule, let’s simulate the event loop:

  1. Execute the first macro task script:
    • console.log(0)
    • console.log(3)
  2. Execute microtask queue:
    • console.log(2)
  3. Page rendering
  4. Perform the second macro task setTimeout():
    • console.log(1)
  5. Page rendering

The difference between macro and micro tasks

Due to the rules of the event loop, there is a significant difference between macro tasks and microtasks: no amount of macro tasks can cause page blocking, while microtasks are too many or too long.

An event loop only executes one macro task, so it does not block the page:

function loop () {
    setTimeout(loop, 0)}Copy the code

However, in an event cycle, all the micro-tasks in the micro-task queue need to be executed. When the micro-tasks take a long time or there are too many micro-tasks, it is easy to cause page blocking:

function loop () {
    Promise.resolve().then(loop)
}
Copy the code

If you don’t already understand EventLoop, here’s a video to learn about it: www.youtube.com/watch?v=cCO…