前言

javascript是單線程的語言，也就是說，同一個(gè)時(shí)間只能做一件事。而這個(gè)單線程的特性，與它的用途有關(guān)，作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會帶來很復(fù)雜的同步問題。比如，假定JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？

為了利用多核CPU的計(jì)算能力，HTML5提出Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個(gè)新標(biāo)準(zhǔn)并沒有改變JavaScript單線程的本質(zhì)

這是今天一個(gè)朋友發(fā)給我的一個(gè)面試題，

感覺還挺有意思的，

寫個(gè)博客以供分享

先看看這個(gè)面試題目：

觀察下面的代碼，寫出輸出結(jié)果

console.log('0')
setTimeout(function () {
 console.log('1');
});

new Promise(function(resolve,reject){
 console.log('2')
 resolve(3)
}).then(function(val){
 console.log(val)
})
console.log(4)

輸出結(jié)果： “0” “2” 4 3 “1”

今天主要是分析為什么輸出結(jié)果是這樣的？這就和 javascript 的執(zhí)行機(jī)制密切相關(guān)了.

Event Queue 和 Event Loop

javascript 是一門單線程的語言, 這就意味著在執(zhí)行代碼的時(shí)候, 都只有一個(gè)主線程來處理所有的任務(wù).

我們都知道 javascript 包括同步代碼和異步代碼, 那么 javascript 是怎么處理這兩種情況的呢?

• 同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行 場所, 同步的進(jìn)入主線程，異步的進(jìn)入 Event Table 并注冊函數(shù)
• 當(dāng)指定的事情完成時(shí), Event Table 會將這個(gè)函數(shù)(回調(diào)函數(shù))移入 Event Queue
• 主線程內(nèi)的任務(wù)執(zhí)行完畢為空, 會去 Event Queue 讀取對應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行
• 上述過程會不斷重復(fù), 也就是常說的 Event Loop(事件循環(huán))

這里我們引進(jìn)了 Event Queue 事件隊(duì)列這一概念. 所有異步操作的回調(diào)都會進(jìn)入到這里. 然后等到主線程空閑, 就會從這里調(diào)取回調(diào)執(zhí)行.

setTimeout

setTimeout 相信大家都有使用過, 可以延時(shí)執(zhí)行并且是異步執(zhí)行的.

但是有時(shí)候我們得到的結(jié)果往往是代碼實(shí)際執(zhí)行的時(shí)間比我們想要延時(shí)執(zhí)行的時(shí)間要久。這又是為什么呢?

這就和我們之前所說的 Event Loop 有關(guān)了, 我們可以來具體看下 setTimeout 的執(zhí)行步驟:

setTimeout(function () {
asyncFn()
}, 1000);

syncFn()

• asyncFn 將異步執(zhí)行函數(shù)放在 Event Table, 并且開始計(jì)時(shí)
• 開始執(zhí)行 syncFn, 但是 syncFn 可能需要處理的內(nèi)容很多, 執(zhí)行時(shí)間超過 1 秒, 但是計(jì)時(shí)還在繼續(xù)
• 計(jì)時(shí)到達(dá) 1 秒, setTimeout 延時(shí)完成, asyncFn 進(jìn)入 Event Queue 事件隊(duì)列, 但是主線程還在執(zhí)行, 所以只能等待
• syncFn 執(zhí)行完成, 此時(shí) asyncFn 從事件隊(duì)列中進(jìn)入主線程執(zhí)行

所以有時(shí)候會出現(xiàn)代碼實(shí)際執(zhí)行時(shí)間比延時(shí)時(shí)間長的情況。

宏任務(wù)和微任務(wù)

之前我們說過異步任務(wù)會進(jìn)入到事件隊(duì)列中, 不同類型的任務(wù)會進(jìn)入到不同的隊(duì)列中, 比如宏任務(wù)會進(jìn)入到宏任務(wù)隊(duì)列中, 微任務(wù)會進(jìn)入到微任務(wù)隊(duì)列中.

我們只要記住 當(dāng)當(dāng)前執(zhí)行棧執(zhí)行完畢時(shí)會立刻先處理所有微任務(wù)隊(duì)列中的事件，然后再去宏任務(wù)隊(duì)列中取出一個(gè)事件。同一次事件循環(huán)中，微任務(wù)永遠(yuǎn)在宏任務(wù)之前執(zhí)行

這時(shí)候我們就可以解釋一開始的代碼執(zhí)行結(jié)果了:

• 主線程執(zhí)行按順序代碼
• 遇到 setTimeout, 回調(diào)進(jìn)入到宏任務(wù)隊(duì)列上
• 遇到 Promise, 立即執(zhí)行, then 函數(shù)進(jìn)入到微任務(wù)隊(duì)列
• 同步代碼執(zhí)行結(jié)束, 主線程檢查是否存在微任務(wù), 發(fā)現(xiàn) then, 執(zhí)行
• 微任務(wù)執(zhí)行完畢, 再去查找宏任務(wù) setTimeout, 執(zhí)行
• setTimeout 執(zhí)行結(jié)束, 檢查是否存在微任務(wù), 不存在, 結(jié)束.

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論