Before understanding the event loop mechanism, Let me talk about a few
Queue Queue [] has an inlet and an outlet, FIFO
Stack [Stack] last out, imagine a box, to go into in the bottom, so to come out, of course, go after the first out
Heap heap [] is the time to request an application running in the operating system to allocate their own memory
Heap is running, the application memory space corresponding to the size, i.e., dynamic memory allocation. Stack means running the application is dynamic memory, and the stack is a method of using a stack.
After the stack is advanced out of the heap does not have this feature, both of which are temporary holding place for data. For a heap, we can be free to increase the variable and delete variables do not follow what order.
JavaScript is a scripting language single-threaded, which for obvious reasons, browser parses Dom is order, if it is multi-threaded, two threads at the same time operating a Dom, that the browser will know what to do.
A graphical depiction of modern JavaScript engines to achieve
It contains a pending message queue of a JavaScript runtime. Each message is associated with a function to process the message.
Dividing line ================================================ ====================
JavaScript macro task (MacroTask) and micro-task (MicroTask)
Macrotask comprising: script (whole codes), setTimeout, setInterval, setImmediate, I / O, UI rendering.
Micro tasks include: Promises, Object.observe, MutationObserver
Implementation process
Perform a synchronization code is encountered asynchronous tasks will be asynchronous macro macro macro task into the task queue, the task will be encountered asynchronous micro-micro asynchronous tasks into micro-tasks queue, when all the synchronization code execution is completed, then the asynchronous micro tasks transferred from the queue of the main thread of execution, after completion of the asynchronous task execution micro-macro task execution queue transferred from the main thread, it has been circulating until all tasks executed.
Consider the following piece of code
console.log(1)
setTimeout(()=>{
console.log(2)
}, 1000)
new Promise((resolve)=>{
resolve()
console.log(3)
}).then(()=>{
console.log(4)
})
console.log(5)
Output: 13542
Parsing process
1, into the main program, sequential tasks encountered, the console print out 1
2, to scan macrotask asynchronous queue into macrotask
3, the scan asynchronous macrotask Promise, the console 3 outputs, the next micro asynchronous callback tasks, task queue into a micro
4, the scanning synchronization task, console output 5
5, the main program synchronization task is finished, the micro view asynchronous task queue is empty, non-empty task is popped off the execution corresponding to the main routine, the console 4 printout repeatedly executed until the queue is empty,
6, the main program for macro task queue to see whether it is empty, is not empty, then pop up the task to the main program, the console printout 2, the loop executes until the queue is empty
7, the main program is finished
MDN reference document event loop NodeJs event loop