JS Process in 、 Threads 、 Task queue 、 The event loop 、 Macro task 、 Micro task 、 Understanding of concepts such as execution stack
javascript There are many concepts to know in , Especially those listed in the title , Let's talk about these concepts today .
One 、 Processes and threads
Every part of the browser tab Page can be regarded as a browser kernel process , There will be multiple threads under each process to cooperate with each other to complete the task
such as GUI Threads 、JS Engine threads 、 Network thread 、 Timer thread, etc
Two 、 Task queue
The task queue can be regarded as one task after another , When the task of the main thread is completed , Start executing the tasks in the task queue （ If a new asynchronous task is added to the current task queue , Then its callback function will be placed in the subsequent task queue ）
3、 ... and 、 The event loop
After the asynchronous task is executed , Its callback will be put into the task queue . When the main thread task execution ends , Go to the task queue to find the tasks to be done next , Put it into the main thread to execute , Until the task is all over . If there are no new tasks to do , The browser is waiting , Know the new external input 、 Events trigger , Such a loop process is called an event loop .
Four 、 Macro task and micro task
There are two kinds of tasks in the task queue , One is macro task and the other is micro task . I haven't found the specific concept , But it can be understood in this way , A micro task is a task to be executed immediately after the current main thread task is executed , Macro task is the task to be placed in the main thread of the next event loop .
General macro tasks include setTimeout and setInterval
Micro tasks have promise、process.nextTick etc.
5、 ... and 、 Execution stack
The execution stack is a mechanism for the interpreter to track the execution flow of a function . When the engine first met js Code , A global execution context will be generated and pushed into the execution stack , Every time you encounter a function call , Just push a new context into the stack . After the engine executes the function at the top of the stack, the current execution context will pop up until the functions are executed in turn and return to the global context .
test
Interested students can try the output order of the following code
setTimeout(function () {
console.log('1')
});
new Promise(function (resolve) {
console.log('2');
resolve();
}).then(function () {
console.log('3')
setTimeout(function () {
console.log('5')
});
});
console.log('4');The first one settimeout when , First, put the whole code block into the first macro task , encounter promise, First execute the internal code , hold then Put the code in as a task . encounter console.log(4) Execute directly in the main thread . After that, the task execution is retrieved from the micro task console.log(3) And put the back setTimeout Put it on the next macro task queue （ the second ） in . Then retrieve the code to be executed from the current macro task queue , Print 1. Then start to the next event loop , Pull out the code of the macro task and execute .
So the order is 24315
