首先我們要知道兩點:
- JavaScript是單線程的語言
- Event Loop是javascript的執行機制
javascript事件循環
js是單線程,就像學生排隊上廁所,學生需要排隊一個一個上廁所,同理js任務也要一個一個順序執行。如果一個任務耗時過長,那麼後一個任務也必須等着。那麼問題來了,假如我們想瀏覽新聞,但是新聞包含的超清圖片加載很慢,難道我們的網頁要一直卡着直到圖片完全顯示出來?因此聰明的程序員將任務分爲兩類:
- 同步任務
- 異步任務
從圖片可知,一個方法執行會向執行棧中加入這個方法的執行環境,在這個執行環境中還可以調用其他方法,甚至是自己,其結果不過是在執行棧中再添加一個執行環境。這個過程可以是無限進行下去的,除非發生了棧溢出,即超過了所能使用內存的最大值。
當我們打開網站時,網頁的渲染過程就是一大堆同步任務,比如頁面骨架和頁面元素的渲染。而像加載圖片音樂之類佔用資源大耗時久的任務,就是異步任務。關於這部分有嚴格的文字定義,但本文的目的是用最小的學習成本徹底弄懂執行機制
先看一段代碼:
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
複製代碼
打印順序是什麼? 正確答案是:script start, script end, promise1, promise2, setTimeout 已蒙圈。。。
爲什麼會出現這樣打印順序呢?
- 如下導圖(此圖從網站下載)
解讀:
- 同步和異步任務分別進入不同的執行"場所",同步的進入主線程,異步的進入Event Table並註冊函數
- 當指定的事情完成時,Event Table會將這個函數移入Event Queue。
- 主線程內的任務執行完畢爲空,會去Event Queue讀取對應的函數,進入主線程執行。
- 上述過程會不斷重複,也就是常說的Event Loop(事件循環)。
我們不禁要問了,那怎麼知道主線程執行棧爲空呢?js引擎存在monitoring process進程,會持續不斷的檢查主線程執行棧是否爲空,一旦爲空,就會去Event Queue那裏檢查是否有等待被調用的函數。
看代碼:
let data = [];
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('發送成功!');
}
})
console.log('代碼執行結束');
複製代碼
上面是一段簡易的ajax請求代碼:
- ajax進入Event Table,註冊回調函數success。
- 執行console.log('代碼執行結束')。
- ajax事件完成,回調函數success進入Event Queue。
- 主線程從Event Queue讀取回調函數success並執行。
相信通過上面的文字和代碼,你已經對js的執行順序有了初步瞭解。
微任務(Microtasks)、宏任務(task)?
微任務和宏任務皆爲異步任務,它們都屬於一個隊列,主要區別在於他們的執行順序,Event Loop的走向和取值。那麼他們之間到底有什麼區別呢?
一個掘金的老哥(ssssyoki)的文章摘要: 那麼如此看來我給的答案還是對的。但是js異步有一個機制,就是遇到宏任務,先執行宏任務,將宏任務放入eventqueue,然後在執行微任務,將微任務放入eventqueue最騷的是,這兩個queue不是一個queue。當你往外拿的時候先從微任務裏拿這個回掉函數,然後再從宏任務的queue上拿宏任務的回掉函數。 我當時看到這我就服了還有這種騷操作。
- 而宏任務一般是:包括整體代碼script,setTimeout,setInterval、setImmediate。
- 微任務:原生Promise(有些實現的promise將then方法放到了宏任務中)、process.nextTick、Object.observe(已廢棄)、 MutationObserver 記住就行了。
- process是什麼?
不廢話,看以下例子:
setTimeout
大名鼎鼎的setTimeout無需再多言,大家對他的第一印象就是異步可以延時執行,我們經常這麼實現延時3秒執行:
setTimeout(() => {
console.log('延時3秒');
},3000)
複製代碼
漸漸的setTimeout用的地方多了,問題也出現了,有時候明明寫的延時3秒,實際卻5,6秒才執行函數,這又咋回事啊?
setTimeout(() => {
task();
},3000)
console.log('執行console');
複製代碼
根據前面我們的結論,setTimeout是異步的,應該先執行console.log這個同步任務,所以我們的結論是:
// 執行console
// task()
複製代碼
去驗證一下,結果正確! 然後我們修改一下前面的代碼:
setTimeout(() => {
task()
},3000)
sleep(10000000)
複製代碼
乍一看其實差不多嘛,但我們把這段代碼在chrome執行一下,卻發現控制檯執行task()需要的時間遠遠超過3秒,說好的延時三秒,爲啥現在需要這麼長時間啊? 這時候我們需要重新理解setTimeout
的定義。我們先說上述代碼是怎麼執行的:
- task()進入Event Table並註冊,計時開始。
- 執行sleep函數,很慢,非常慢,計時仍在繼續。
- 3秒到了,計時事件timeout完成,task()進入Event Queue,但是sleep也太慢了吧,還沒執行完,只好等着。
- sleep終於執行完了,task()終於從Event Queue進入了主線程執行。
上述的流程走完,我們知道setTimeout這個函數,是經過指定時間後,把要執行的任務(本例中爲task())加入到Event Queue中,又因爲是單線程任務要一個一個執行,如果前面的任務需要的時間太久,那麼只能等着,導致真正的延遲時間遠遠大於3秒。
我們還經常遇到setTimeout(fn,0)
這樣的代碼,0秒後執行又是什麼意思呢?是不是可以立即執行呢? 答案是不會的,setTimeout(fn,0)
的含義是,指定某個任務在主線程最早可得的空閒時間執行,意思就是不用再等多少秒了,只要主線程執行棧內的同步任務全部執行完成,棧爲空就馬上執行。舉例說明:
//代碼1
console.log('先執行這裏');
setTimeout(() => {
console.log('執行啦')
},0);
//代碼2
console.log('先執行這裏');
setTimeout(() => {
console.log('執行啦')
},3000);
複製代碼
代碼1的輸出結果是:
先執行這裏
執行啦
複製代碼
代碼2的輸出結果是:
//先執行這裏
// ... 3s later
// 執行啦
複製代碼
關於setTimeout要補充的是,即便主線程爲空,0毫秒實際上也是達不到的。根據HTML的標準,最低是4毫秒。有興趣的同學可以自行了解。
setInterval
上面說完了setTimeout
,當然不能錯過它的孿生兄弟setInterval
。他倆差不多,只不過後者是循環的執行。對於執行順序來說,setInterval
會每隔指定的時間將註冊的函數置入Event Queue,如果前面的任務耗時太久,那麼同樣需要等待。
唯一需要注意的一點是,對於setInterval(fn,ms)
來說,我們已經知道不是每過ms秒會執行一次fn,而是每過ms秒,會有fn進入Event Queue。一旦setInterval的回調函數fn執行時間超過了延遲時間ms,那麼就完全看不出來有時間間隔了。這句話請讀者仔細品味。
Promise與process.nextTick(callback)
- Promise的定義和功能本文不再贅述,可以學習一下 阮一峯老師的Promise
- 而process.nextTick(callback)類似node.js版的"setTimeout",在事件循環的下一次循環中調用 callback 回調函數。
不同類型的任務會進入對應的Event Queue,比如setTimeout
和setInterval
會進入相同的Event Queue。
看例子:
setTimeout(()=>{
console.log('setTimeout1')
},0)
let p = new Promise((resolve,reject)=>{
console.log('Promise1')
resolve()
})
p.then(()=>{
console.log('Promise2')
})
複製代碼
最後輸出結果是Promise1,Promise2,setTimeout1
Promise參數中的Promise1是同步執行的 其次是因爲Promise是microtasks,會在同步任務執行完後會去清空microtasks queues, 最後清空完微任務再去宏任務隊列取值。
Promise.resolve().then(()=>{
console.log('Promise1')
setTimeout(()=>{
console.log('setTimeout2')
},0)
})
setTimeout(()=>{
console.log('setTimeout1')
Promise.resolve().then(()=>{
console.log('Promise2')
})
},0)
複製代碼
這回是嵌套,大家可以看看,最後輸出結果是Promise1,setTimeout1,Promise2,setTimeout2
- 一開始執行棧的同步任務執行完畢,會去 microtasks queues 找 清空 microtasks queues ,輸出
Promise1
,同時會生成一個異步任務 setTimeout1 - 去宏任務隊列查看此時隊列是 setTimeout1 在 setTimeout2 之前,因爲setTimeout1執行棧一開始的時候就開始異步執行,所以輸出
setTimeout1
- 在執行setTimeout1時會生成Promise2的一個 microtasks ,放入 microtasks queues 中,接着又是一個循環,去清空 microtasks queues ,輸出
Promise2
- 清空完 microtasks queues ,就又會去宏任務隊列取一個,這回取的是
setTimeout2
最後我們來分析一段較複雜的代碼,看看你是否真的掌握了js的執行機制:
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
複製代碼
第一輪事件循環流程分析如下:
- 整體script作爲第一個宏任務進入主線程,遇到console.log,輸出
1
。 - 遇到setTimeout,其回調函數被分發到宏任務Event Queue中。我們暫且記爲
setTimeout1
。 - 遇到process.nextTick(),其回調函數被分發到微任務Event Queue中。我們記爲
process1
。 - 遇到Promise,new Promise直接執行,輸出7。then被分發到微任務Event Queue中。我們記爲
then1
。 - 又遇到了setTimeout,其回調函數被分發到宏任務Event Queue中,我們記爲
setTimeout2
。
宏任務Event Queue | 微任務Event Queue |
---|---|
setTimeout1 | process1 |
setTimeout2 | then1 |
- 上表是第一輪事件循環宏任務結束時各Event Queue的情況,此時已經輸出了
1
和7
。
我們發現了process1和then1兩個微任務。
- 執行process1,輸出
6
。 - 執行then1,輸出
8
。
好了,第一輪事件循環正式結束,這一輪的結果是輸出1,7,6,8
。那麼第二輪時間循環從setTimeout1宏任務開始:
- 首先輸出
2
。接下來遇到了process.nextTick(),同樣將其分發到微任務Event Queue中,記爲process2。 - new Promise立即執行輸出
4
,then也分發到微任務Event Queue中,記爲then2
宏任務Event Queue | 微任務Event Queue |
---|---|
setTimeout2 | process3 |
then3 |
-
第三輪事件循環宏任務執行結束,執行兩個微任務process3和then3。
-
輸出
10
。 -
輸出
12
。 -
第三輪事件循環結束,第三輪輸出
9,11,10,12
。 -
整段代碼,共進行了三次事件循環,完整的輸出爲
1,7,6,8,2,4,3,5,9,11,10,12
。(請注意,node環境下的事件監聽依賴libuv與前端環境不完全相同,輸出順序可能會有誤差)