js queue

js asynchronous queue (micro & macro)

js are relying on event-driven, event loop mechanism js what is it?

Simply write about their own understanding, so it is not comprehensive;

js a main program execution queue and asynchronous queues in two ways

The stack is performed, in order, to explain a block of code, interpreted according to different types,
stack, and then the order of the stack (LIFO) sequentially performed

Mode the main queue, i.e., sequentially from top to bottom is executed

And asynchronous queue includes macroTask macroTask

1. macroTask, including setTimeout setInterval IO UIRendering (only include commonly used)

2. microTask, including Promise process

After the main thread executed, will first see if there is microTask queue, the execution is completed, then perform macroTask

For example, my test code as follows

console.log("1")
setTimeout(function () {
    console.log("2")
})
Promise.resolve().then(function () {
    console.log("3")
    setTimeout(function () {
        console.log("31")
        setTimeout(function () {
            console.log("311")
        })
        Promise.resolve().then(function () {
            console.log("3111")
        })
    })
}).then(function () {
    console.log("4")
})
setTimeout(function () {
    console.log("5")
    Promise.resolve().then(function () {
        console.log("51")
    })
})
console.log("11")

//输出如下: 1 11 3 4 2 5 51 31 3111 311
//macro [2, 5]  [31]
//micro [3, 4]  [51]

Important considerations:

microTask hinder render the page, render belong macroTask;

So if there microTask been circulating implemented, will impede the ui render;

But setTimeout will not;

Also note that rAF (requestAnimationFrame) is used, this is used to render specialized use, execution speed will be
much less than setTimeout.