Why do JS have event loops in browsers?
Because JS needs to operate DOM in the browser, as well as achieve user interaction with the browser. So we need to make js single threaded. If js is designed to be multithreaded, if one thread is modifying a DOM element and another thread is deleting it, the browser will not know which one to operate on.
Now that we know that JS is single-threaded, which means you can only do one thing at a time. This raises the next question, if we write a 5 second timer, can JS operate on other events while the timer is running? If you can’t operate, the user can’t click anything in 5 seconds!
For that, we need a mechanism. To solve our problem above. This is what we call an event loop.
Event Loop
We introduce two concepts here
- Call Stack
- Message Queue
The call stack
Each time a function is called, the interpreter can add the function to the call stack, and the interpreter creates a stack frame for the added function (and executes it immediately). If the executing function also calls other functions, new functions are added to the call stack. When the function completes, the corresponding stack frame is destroyed immediately
The message queue
Something stored in a message queue, which can be thought of as a callback function. In simple terms, the main thread executes events in the message queue when idle. That is, when the call stack is empty (all tasks are completed), the events in the message queue are moved to the call stack for execution.
function func1(){
cosole.log(2);
}
function func2(){
console.log(1);
func1();
console.log(3);
}
func2();
/ / 1
/ / 2
/ / 3
Copy the code1. Here is an example that only applies to the call stack, in the following order
-
Func2 () into the stack
-
console.log(1); Into the stack perform
-
The console. The log (1); After execution, exit the stack
-
Func1 () into the stack
-
console.log(2); Into the stack perform
-
The console. The log (2); After execution, exit the stack
-
Func1 () completes execution and exits the stack
-
console.log(3); Into the stack perform
-
The console. The log (3); After execution, exit the stack
-
Func2 () completes execution and exits the stack
2. Let’s look at another example of call stack and message queue sharing
function func1(){
cosole.log(1);
}
function func2(){
setTimeout(() = >{
console.log(2)},0);
func1();
console.log(3);
}
func2();
/ / 1
/ / 3
/ / 2
Copy the code- Func2 () into the stack
- setTimeout(()=>{ console.log(2) },0); Console. log(2) enters the message queue and is not executed
- SetTimeout out of the stack
- Func1 () into the stack
- console.log(1); Into the stack perform
- The console. The log (1); After execution, exit the stack
- Func1 () completes execution and exits the stack
- console.log(3); Into the stack perform
- The console. The log (3); After execution, exit the stack
- Func2 () completes execution and exits the stack
- The call stack clears, and console.log(2) is pushed onto the call stack
- Console. log(2) Completes execution and exits the stack
These two examples illustrate the concepts of call stack and message Queue. Next, let’s look at another concept, Microtask Queue.
Microtask queue
The microtask queue mainly performs the Promise, process.nextTick tasks. The execution sequence is similar to the above message queue, which is also to execute the tasks in the call stack, and then call. But the microtask queue is called before the message queue. The order of invocation is as follows: call stack > Microtask Queue > message queue
3. Let’s look at the common example of call stack, message queue, microtask queue (Event loop)
var p = new Promise(resolve= >{
console.log(4);
resolve(5)})function func1(){
console.log(1);
}
function func2(){
setTimeout(() = >{
console.log(2);
});
func1();
console.log(3);
p.then(resolved= > {
console.log(resolved);
})
.then(() = >{
console.log(6);
})
}
func2()
/ / 4
/ / 1
/ / 3
/ / 5
/ / 6
/ / 2
Copy the code-
The new Promise into the stack
-
Console. log(4) Push to the stack
-
Resolve (5) Push out of the stack
-
The new Promise a stack
-
Func2 () into the stack
-
setTimeout(()=>{ console.log(2); }); Console. log(2); Enter the message queue for execution. SetTimeout out of the stack
-
Func1 () is pushed
-
console.log(1); After loading, the stack is removed
-
Func1 () out of the stack
-
console.log(3); After loading, the stack is removed
-
The first p.chen stack, console.log(resolved); Enter the microtask queue
-
Console. log(6); Enter the microtask queue
-
Fun2 () goes off the stack, the call stack clears, and the microtask queue starts pushing tasks onto the call stack
-
Console. log(Resolved) On the Stack
-
Console. log(6) is pushed onto the stack after execution. The call stack is cleared and messages queue tasks are pushed onto the call stack
-
console.log(2); After loading, the stack is removed
Here we roughly understand the call stack, message queue, microtask queue. So what are macro tasks and micro tasks?
Macro task, micro task
- We can think of macro tasks as tasks in the call stack + message queue
- Think of microtasks as microtask queues
Combined with the task example above, we can understand the following concept (transport) : the JS engine thread executes the main code block first. The code executed by each call to the stack is a macro task, including the message queue (macro task queue), because the execution of the macro task in the execution stack will fetch the task in the message queue (macro task queue) and add it to the execution stack, which is also the mechanism of the event loop.
A microtask (callback in.then()) is created and added to the end of the microtask queue when a Promise, etc., is encountered while performing a macro task
The so-called Event Loop can be explained by the graph below, which is called the browser Event Loop
(̀⌄ ́) (̀⌄ ́) (̀⌄ ́) (̀ physician) (̀ physician))
(̀⌄ ́) (̀⌄ ́) (̀⌄ ́) (̀ physician) (̀ physician))
(̀⌄ ́) (̀⌄ ́) (̀⌄ ́) (̀ physician) (̀ physician))