基本知識

js是單線程的，只有一個主線程處理邏輯

事件循環(huán)的作用

保證主線程, 有序并高效 或非阻塞 的處理

在js事件中主要分為同步事件（同步任務）與異步事件（異步任務)

同步事件

在主線程中執(zhí)行的任務

異步事件

只有主線程的執(zhí)行棧為空時才開始執(zhí)行異步任務，異步任務又可進一步分為宏任務與微任務

宏任務與微任務的分類

宏任務：

• script(整體代碼)
• setTimeout
• setInterval
• setImmediate
• I/O
• UI render

微任務：

• process.nextTick
• Promise
• Async
• MutationObserver

事件循環(huán)運行機制

1. 首先執(zhí)行同步代碼，遇到宏任務將其加入宏任務隊列，遇到微任務（微任務中又存在微任務會將其就加入到微任務隊列的隊尾）將其加入微任務隊列，直到主線程執(zhí)行棧為空
2. 檢查是否存在微任務，有則會執(zhí)行至微任務隊列為空，然后執(zhí)行下一個宏任務
3. 上述過程會不斷重復，也就是常說的Event Loop(事件循環(huán))。

事件循環(huán)執(zhí)行循序

• 算上script(整體代碼)宏任務，因當前主線程執(zhí)行棧為空，script(整體代碼)中的事件會立即加入到主線程中執(zhí)行

  
  
  image.png

動手試一試

  console.log('script start')

    async function async1() {
        await async2()
        console.log('async1 end')
    }
    async function async2() {
        console.log('async2 end')
        return Promise.resolve().then(()=>{
            console.log('async2 end1')
        })
    }
    async1()

    setTimeout(function() {
        console.log('setTimeout1')
        setTimeout(function() {
            console.log('setTimeout3')
        }, 0)
        new Promise(resolve => {
            resolve()
        }).then(function() {
                console.log('promise3')
            })
            .then(function() {
                console.log('promise4')
            })
    }, 0)
    setTimeout(function() {
        console.log('setTimeout2')
    }, 0)

    new Promise(resolve => {
        console.log('Promise')
        resolve()
    })
        .then(function() {
            console.log('promise1')
        })
        .then(function() {
            console.log('promise2')
            setTimeout(()=>{
               console.log("123456")
            },0)
        })

    new Promise(resolve=>{
        resolve()
    }).then(()=>{
        console.log('456789')
    })

    console.log('script end')

相關(guān)資料

并發(fā)模型與事件循環(huán)
js中的宏任務與微任務
JS事件循環(huán)機制（event loop）之宏任務、微任務