一、是什么

JavaScript 在設計之初便是單線程，即指程序運行時，只有一個線程存在，同一時間只能做一件事

為什么要這么設計，跟JavaScript的應用場景有關

JavaScript 初期作為一門瀏覽器腳本語言，通常用于操作 DOM ，如果是多線程，一個線程進行了刪除 DOM ，另一個添加 DOM，此時瀏覽器該如何處理？

為了解決單線程運行阻塞問題，JavaScript用到了計算機系統(tǒng)的一種運行機制，這種機制就叫做事件循環(huán)（Event Loop）

事件循環(huán)（Event Loop）

在JavaScript中，所有的任務都可以分為

• 同步任務：立即執(zhí)行的任務，同步任務一般會直接進入到主線程中執(zhí)行
• 異步任務：異步執(zhí)行的任務，比如ajax網絡請求，setTimeout 定時函數(shù)等

同步任務與異步任務的運行流程圖如下：

從上面我們可以看到，同步任務進入主線程，即主執(zhí)行棧，異步任務進入任務隊列，主線程內的任務執(zhí)行完畢為空，會去任務隊列讀取對應的任務，推入主線程執(zhí)行。上述過程的不斷重復就是事件循環(huán)

二、宏任務與微任務

如果將任務劃分為同步任務和異步任務并不是那么的準確，舉個例子：

console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)

如果按照上面流程圖來分析代碼，我們會得到下面的執(zhí)行步驟：

• console.log(1) ，同步任務，主線程中執(zhí)行
• setTimeout() ，異步任務，放到 Event Table，0 毫秒后console.log(2) 回調推入 Event Queue 中
• new Promise ，同步任務，主線程直接執(zhí)行
• .then ，異步任務，放到 Event Table
• console.log(3)，同步任務，主線程執(zhí)行

所以按照分析，它的結果應該是 1 => 'new Promise' => 3 => 2 => 'then'

但是實際結果是：1=>'new Promise'=> 3 => 'then' => 2

出現(xiàn)分歧的原因在于異步任務執(zhí)行順序，事件隊列其實是一個“先進先出”的數(shù)據結構，排在前面的事件會優(yōu)先被主線程讀取

例子中 setTimeout回調事件是先進入隊列中的，按理說應該先于 .then 中的執(zhí)行，但是結果卻偏偏相反

原因在于異步任務還可以細分為微任務與宏任務

微任務

一個需要異步執(zhí)行的函數(shù)，執(zhí)行時機是在主函數(shù)執(zhí)行結束之后、當前宏任務結束之前

常見的微任務有：

• Promise.then
• MutaionObserver
• Object.observe（已廢棄；Proxy 對象替代）
• process.nextTick（Node.js）

宏任務

宏任務的時間粒度比較大，執(zhí)行的時間間隔是不能精確控制的，對一些高實時性的需求就不太符合

常見的宏任務有：

• script (可以理解為外層同步代碼)
• setTimeout/setInterval
• UI rendering/UI事件
• postMessage、MessageChannel
• setImmediate、I/O（Node.js）

這時候，事件循環(huán)，宏任務，微任務的關系如圖所示

按照這個流程，它的執(zhí)行機制是：

• 執(zhí)行一個宏任務，如果遇到微任務就將它放到微任務的事件隊列中
• 當前宏任務執(zhí)行完成后，會查看微任務的事件隊列，然后將里面的所有微任務依次執(zhí)行完

回到上面的題目

console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)

流程如下

// 遇到 console.log(1) ，直接打印 1
// 遇到定時器，屬于新的宏任務，留著后面執(zhí)行
// 遇到 new Promise，這個是直接執(zhí)行的，打印 'new Promise'
// .then 屬于微任務，放入微任務隊列，后面再執(zhí)行
// 遇到 console.log(3) 直接打印 3
// 好了本輪宏任務執(zhí)行完畢，現(xiàn)在去微任務列表查看是否有微任務，發(fā)現(xiàn) .then 的回調，執(zhí)行它，打印 'then'
// 當一次宏任務執(zhí)行完，再去執(zhí)行新的宏任務，這里就剩一個定時器的宏任務了，執(zhí)行它，打印 2

三、async與await

async 是異步的意思，await 則可以理解為等待

放到一起可以理解async就是用來聲明一個異步方法，而 await 是用來等待異步方法執(zhí)行

async

async函數(shù)返回一個promise對象，下面兩種方法是等效的

function f() {
    return Promise.resolve('TEST');
}
// asyncF is equivalent to f!
async function asyncF() {
    return 'TEST';
}

await

正常情況下，await命令后面是一個 Promise 對象，返回該對象的結果。如果不是 Promise 對象，就直接返回對應的值

async function f(){
    // 等同于
    // return 123
    return await 123
}
f().then(v => console.log(v)) // 123

不管await后面跟著的是什么，await都會阻塞后面的代碼

async function fn1 (){
    console.log(1)
    await fn2()
    console.log(2) // 阻塞
}
async function fn2 (){
    console.log('fn2')
}
fn1()
console.log(3)

上面的例子中，await 會阻塞下面的代碼（即加入微任務隊列），先執(zhí)行 async 外面的同步代碼，同步代碼執(zhí)行完，再回到 async 函數(shù)中，再執(zhí)行之前阻塞的代碼

所以上述輸出結果為：1，fn2，3，2

四、流程分析

通過對上面的了解，我們對JavaScript對各種場景的執(zhí)行順序有了大致的了解

這里直接上代碼：

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2')
}
console.log('script start')
setTimeout(function () {
    console.log('settimeout')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')

分析過程：

• 執(zhí)行整段代碼，遇到 console.log('script start') 直接打印結果，輸出 script start
• 遇到定時器了，它是宏任務，先放著不執(zhí)行
• 遇到 async1()，執(zhí)行 async1 函數(shù)，先打印 async1 start，下面遇到await怎么辦？先執(zhí)行 async2，打印 async2，然后阻塞下面代碼（即加入微任務列表），跳出去執(zhí)行同步代碼
• 跳到 new Promise 這里，直接執(zhí)行，打印 promise1，下面遇到 .then()，它是微任務，放到微任務列表等待執(zhí)行
• 最后一行直接打印 script end，現(xiàn)在同步代碼執(zhí)行完了，開始執(zhí)行微任務，即 await 下面的代碼，打印 async1 end
• 繼續(xù)執(zhí)行下一個微任務，即執(zhí)行 then 的回調，打印 promise2
• 上一個宏任務所有事都做完了，開始下一個宏任務，就是定時器，打印 settimeout

所以最后的結果是：script start、async1 start、async2、promise1、script end、async1 end、promise2、settimeout

以上就是JS面試之對事件循環(huán)的理解的詳細內容，更多關于JS面試事件循環(huán)的資料請關注腳本之家其它相關文章！

最新評論