Analysis of JavaScript's event loop mechanism

Preface:

This time I will mainly sort out my understanding of the Js event loop mechanism, synchronization, asynchronous tasks, macro tasks, and micro tasks. There is a high probability that there are still some deviations or errors for the time being. If so, you are welcome to correct my mistakes!

1. Reasons for the event loop and task queue:

First of all, JS is single-threaded, so this design is reasonable. Imagine if the DOM is deleted on one side and added on the other side, how should the browser handle it?

Quote:

" Single-threaded means that tasks are serial, and the next task needs to wait for the previous task to be executed, which may result in a long wait. However, due to tasks such as ajax network requests, setTimeout time delays, and user interactions with DOM events, these tasks do not consume CPU and are a waste of resources. Therefore, asynchrony appears. By assigning tasks to corresponding asynchronous modules for processing, the efficiency of the main thread is greatly improved, and other operations can be processed in parallel. When the asynchronous processing is completed and the main thread is idle, the main thread reads the corresponding callback and performs subsequent operations to maximize the use of the CPU. At this time, the concepts of synchronous execution and asynchronous execution appear. Synchronous execution means that the main thread executes tasks in sequence and serially; asynchronous execution means that the CPU skips waiting and processes subsequent tasks first (the CPU performs tasks in parallel with network modules, timers, etc.). This creates task queues and event loops to coordinate the work between the main thread and asynchronous modules. "

two, Event loop mechanism:

Diagram:

First, the JS execution code operation is divided主線程and任務隊列. The execution of any JS code can be divided into the following steps:

Step 1: The main thread reads the JS code, which is a synchronous environment, forming the corresponding heap and execution stack;
Step 2: When the main thread encounters an asynchronous operation, it will hand over the asynchronous operation to the corresponding API for processing;
Step 3: When the asynchronous operation is completed, push it into the task queue. Step 4: After the main thread is executed, query the task queue, take out a task, and push it into the main thread for processing. Step 5: Repeat steps 2, 3, and 4.

Common asynchronous operations include: ajax request, setTimeout, and similar onclik events, etc.

three, Task Queue:

Synchronous and asynchronous tasks enter different execution environments respectively. Synchronous tasks enter the main thread, that is, the main execution stack, and asynchronous tasks enter the task queue.

First of all, as the name suggests, since it is a queue, it follows FIFO principle.

As shown in the diagram above, there are multiple task queues, and their execution order is:

In the same task queue, tasks are taken away by the main thread in the order of the queue;
There is a priority between different task queues, and the one with higher priority is obtained first (such as user I/O)

3.1 Types of task queues:

The task queue is divided into宏任務(macrotask queue) and微任務(microtask queue)

Macro tasks mainly include: script (whole code), setTimeout, setInterval, I/O, UI interaction events, setImmediate (Node.js environment)

Microtasks mainly include: Promise, MutaionObserver, process.nextTick (Node.js environment)

3.2 The difference between the two:

microtask queue:

(1) Unique, there is only one in the entire event loop;
(2) The execution is synchronous. Microtasks in the same event loop will be executed serially in the queue order.

PS: Therefore, microtask queue can form a synchronous execution environment

Macrotask macrotask queue :

(1) Not unique, there is a certain priority (user I/O part has a higher priority)
(2) Asynchronous execution: only one event is executed in the same event loop.

3.3 A more detailed event loop process

• 1. 2. 3. Same as above
• The main thread queries the task queue, executes the microtask queue, executes them in order, and completes all executions;
• The main thread queries the task queue, executes the macrotask queue, takes the first task in the queue and executes it.
• Repeat steps 4 and 5;

Let's use a simple example to deepen our understanding:

console.log('1, time = ' + new Date().toString()) // 1. Enter the main thread, execute synchronization tasks, and output 1
setTimeout(macroCallback, 0) // 2. Join the macro task queue // 7. Start executing this timer macro task, call macroCallback, and output 4
new Promise(function (resolve, reject) { //3. Join the microtask queue console.log('2, time = ' + new Date().toString()) //4. Execute the synchronization code in this microtask and output 2
  resolve()
  console.log('3, time = ' + new Date().toString()) //5. Output 3
}).then(microCallback) // 6. Execute the then microtask, call microCallback, and output 5

//Function definition function macroCallback() {
  console.log('4, time = ' + new Date().toString())
}

function microCallback() {
  console.log('5, time = ' + new Date().toString())
}

Running results:

Four, Powerful asynchronous expert process.nextTick()

The first time I saw this thing, it looked familiar. I thought about it and it seemed that I had used this.$nextTick(callback) in the Vue project before. At that time, it said that the code in the callback function would be executed after the elements on the page were re-rendered. I didn’t quite understand it, so I’ll just remember it for now.

4.1 When is process.nextTick() called?

Whenever process.nextTick() is called during a given phase, all callbacks passed to process.nextTick() will be resolved before the event loop continues.

In the event loop, each loop operation is called tick . After knowing this, it will be easier to understand when this method is called!

Let's borrow other people's examples to deepen our understanding of the event loop:

var flag = false // 1. Variable declaration Promise.resolve().then(() => {
  // 2. Distribute the then task to the microtask queue of this round of loop console.log('then1') // 8. Execute the then microtask, print then1, and the flag is true at this time flag = true
})
new Promise(resolve => {
  // 3. Execute the synchronous code in Promise console.log('promise')
  resolve()
  setTimeout(() => { // 4. Put the task in the timer into the macro task queue console.log('timeout2') // 11. Execute the timer macro task. A waiting time of 10 is specified here, so it is executed after another timer task}, 10)
}).then(function () {
  // 5. Distribute the then task to the microtask queue of this round of loop console.log('then2') // 9. Execute the then microtask and print then2. This round of tick ends})
function f1(f) {
  // 1. Function declaration f()
}
function f2(f) {
  // 1. Function declaration setTimeout(f) // 7. Put `f` in `setTimeout` into the macro task queue, wait for the current round of `tick` to be executed, and then execute it in the next event loop}
f1(() => console.log('f is:', flag ? 'asynchronous' : 'synchronous')) // 6. Print `f is: synchronous`
f2(() => {
  console.log('timeout1,', 'f is:', flag ? 'asynchronous' : 'synchronous') // 10. Execute timer macro task})

console.log('This round of macro tasks has been executed') // 7. Print

Running results:

The callback in process.nextTick is called after the current tick is executed and before the next macro task is executed.

Official example:

let bar;

// This method uses an asynchronous signature, but it actually calls the callback function synchronously someAsyncApiCall(callback) { callback(); }

// callback function is called before `someAsyncApiCall` completessomeAsyncApiCall(() => {
  // bar is not assigned any value because `someAsyncApiCall` has completed console.log('bar', bar); // undefined
});

bar = 1;

Use process.nextTick :

let bar;

function someAsyncApiCall(callback) {
  process.nextTick(callback);
}

someAsyncApiCall(() => {
  console.log('bar', bar); // 1
});

bar = 1;

Let's look at another example with process.nextTick :

console.log('1'); // 1. Push into the main thread execution stack and output 1

setTimeout(function () { //2. Its callback function is added to the macro task queue //7. Currently the micro task queue is empty, so take out the first item in the macro task queue and execute this task console.log('2'); // Output 2
    process.nextTick(function () { // 16. The last loop ends, called before the next macro task starts, output 3
        console.log('3'); 
    })
    new Promise(function (resolve) {
    	//8. Execute the synchronization task of this promise, output 4, and the state becomes resolved
        console.log('4');
        resolve();
    }).then(function () {//9. Detect the asynchronous method then and add its callback function to the microtask queue console.log('5'); // 10. Take out the first item in the microtask queue, which is the callback of this then, execute it, and output 5
    })
})

process.nextTick(function () { // 11. Once the event loop ends, execute the callback of nextTick() and output 6
    console.log('6');
})
new Promise(function (resolve) { 
	//3. Execute the synchronous task in promise and output 7, the state changes to resolved
    console.log('7');
    resolve();
}).then(function () { //4. Detect the asynchronous method then, add its callback function to the microtask queue console.log('8'); //6. The main thread is executed, take out the first item in the microtask queue, push its callback function into the execution stack, and output 8
})

setTimeout(function () { //5. Its callback function is added to the macro task queue //12. At this moment, the micro task queue is empty, and the macro task starts to execute console.log('9'); // Output 9
    process.nextTick(function () { // 17. At this moment, both the microtask and macrotask queues are empty, the loop ends automatically, executes this callback, and outputs 10
        console.log('10');
    })
    new Promise(function (resolve) {
    	//13. Execute the synchronization task of this promise, output 11, and the state changes console.log('11');
        resolve();
    }).then(function () {//14. Detect the then asynchronous method and add it to the microtask queue console.log('12');//15. Take out the first item in the microtask queue, execute this then microtask, and output 12
    })

})

Running results:

This process is explained in detail:

• First, enter the main thread, detect that log is just a normal function, push it into the execution stack, and output 1;
• It is detected that setTimeout is a special asynchronous method (macrotask), and it is handed over to other kernel modules for processing. The callback function of setTimeout is placed in宏任務(macrotask) queue;
• It is detected that the promise object and the resolve method are general methods, and its synchronization task is pushed into the execution stack, 7 is output, and the state is changed to resolved;
• It is detected that the then method of the promise object is an asynchronous method, and it is handed over to other kernel modules for processing. The callback function is placed in微任務(microtask) queue;
• Another setTimeout is detected as a special asynchronous method, and its callback function is placed in宏任務(macrotask) queue;
• At this point, the main thread is empty and starts to take from the task queue, taking out the first item in the microtask queue, which is the callback of the then method of the first promise, and executing it, outputting 8;
• Check that the microtask queue is empty at this time, take out the first item of the macrotask queue, which is the first setTimeOut, execute its callback function, and output 2;
• In its callback, it encounters a promise, executes its synchronous task, outputs 4, and the state changes;
• Then detect then, as above, add it to the microtask queue;
• Take out the first item of the microtask queue and execute it in the main thread, which is the then just now, and output 5;
• This loop ends, and before the next macro task starts, the callback of the first process.nextTick() is called, and the output is 6;
• Start the next macro task, take out the first item in the macro task queue, which is the callback of the second setTimeout, push it into the execution stack, and output 9;
• Then push the synchronization task of the promise object into the execution stack, output 11, and change the state to resolved;
• At this time, the asynchronous then method is detected again, and its callback is added to the microtask queue as above;
• Take out the first item of the microtask queue, which is the then callback just now, and output 12;
• This loop ends and is executed before the next macro task starts. The callback of process.nextTick() outputs 3;
• At this time, it is found that the task queue and the main thread are empty, the event loop ends automatically, and the last process.nextTick() callback is executed, outputting 10;

Finish! When the inspiration comes to me, I quickly write it down and check it later to see if there are any problems. You are also welcome to point out my mistakes.

Let's analyze a simple example:

console.log('0');
setTimeout(() => {
    console.log('1');
    new Promise(function(resolve) {
        console.log('2');
        resolve();
    }).then(()=>{
        console.log('3');
    })
    new Promise(resolve => {
        console.log('4');
        for(let i=0;i<9;i++){
            i == 7 && resolve();
        }
        console.log('5');
    }).then(() => {
        console.log('6');
    })
})

• Enter the main thread, detect that log is a normal function, push it into the execution stack, and output 0;
• It is detected that setTimeOut is a special asynchronous method, which is handed over to other modules for processing, and its callback function is added to the macrotask queue;
• At this point, there are no tasks in the main thread, so start taking tasks from the task queue;
• If the task queue is found to be empty, the first item of the macro task queue is taken out, which is the callback function of the timer just now;
• Execute the synchronization task and output 1;
• Detect that the promise and its resolve method are general methods, push them into the execution stack, output 2, and change the state to resolve;
• Detect that the then method of this promise is an asynchronous method, and add its callback function to the microtask queue;
• Then another promise is detected, the synchronization task is executed, 4 and 5 are output, and the state changes to resolved;
• Then add its then asynchronous method to the microtask queue;
• Execute the first item in the microtask queue, that is, the then of the first promise, and output 3;
• Then take out the first item of the task queue, which is the then of the second promise, and output 6;
• At this point, both the main thread and the task queue are empty, and the execution is complete;

Code running results:

This is the end of this article about the analysis of JavaScript's event loop mechanism. For more relevant JavaScript event loop mechanism content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!