js 隊列

js 中的異步隊列(micro & macro)

js都是靠事件驅動的, js中的事件循環機制是什麼呢?

只是簡單寫一下本身的理解, 因此不是很全面;

js 程序執行有 主隊列 以及 異步隊列兩種方式

棧中是按照順序進行執行, 對於一段代碼的解釋, 按照不一樣的類型進行解釋,
入棧, 而後按照棧的順序(後進先出)依次進行執行

主隊列, 即從上到下的方式依次進行執行

異步隊列主要包括macroTask 和 macroTask

1. macroTask, 主要包括 setTimeout setInterval IO UIRendering(只列舉經常使用的)

2. microTask , 主要包括 Promise process

主線程執行完成後, 會首先查看 microTask 隊列中是否有, 執行完成後, 再執行 macroTask

例如以下個人測試代碼

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]

須要注意的地方:

microTask會阻礙頁面的 render, render 是屬於 macroTask;

因此若是有 microTask 一直循環執行的話, 會阻礙 ui 的 render;

可是 setTimeout 不會;

另外要注意 rAF(requestAnimationFrame) 的使用, 這個是用來專門進行渲染使用的, 執行速度會 比 setTimeout 少不少.