首先,請牢記2點:
-
JS是單線程語言
-
JS的Event Loop是JS的執行機制。深入瞭解JS的執行,就等於深入瞭解JS裏的event loop
1.靈魂三問:JS爲什麼是單線程的?爲什麼需要異步?單線程又是如何實現異步的呢?
技術的出現,都跟現實世界裏的應用場景密切相關的。同樣的,我們就結合現實場景,來回答這三個問題。
(1) JS爲什麼是單線程的?
JS最初被設計用在瀏覽器中,那麼想象一下,如果瀏覽器中的JS是多線程的。
場景描述:
那麼現在有2個進程,process1 process2,由於是多進程的JS,所以他們對同一個dom,同時進行操作。 process1 刪除了該dom,而process2 編輯了該dom,同時下達2個矛盾的命令,瀏覽器究竟該如何執行呢?
這樣想,JS爲什麼被設計成單線程應該就容易理解了吧。
(2) JS爲什麼需要異步?
場景描述:
如果JS中不存在異步,只能自上而下執行,如果上一行解析時間很長,那麼下面的代碼就會被阻塞。 對於用戶而言,阻塞就意味着"卡死",這樣就導致了很差的用戶體驗
所以,JS中存在異步執行。
(3) JS單線程又是如何實現異步的呢?
既然JS是單線程的,只能在一條線程上執行,又是如何實現的異步呢?
是通過的事件循環(event loop),理解了event loop機制,就理解了JS的執行機制。
2.JS中的event loop(1)
例1,觀察它的執行順序
-
console.log(1)
-
-
setTimeout(function(){
-
console.log(2)
-
},0)
-
-
console.log(3)
運行結果是:1 3 2
也就是說,setTimeout裏的函數並沒有立即執行,而是延遲了一段時間,滿足一定條件後纔去執行的,這類代碼,我們叫異步代碼。
所以,這裏我們首先知道了JS裏的一種分類方式,就是將任務分爲:同步任務和異步任務。
按照這種分類方式:JS的執行機制是:
-
首先判斷JS是同步還是異步,同步就進入主進程,異步就進入event table
-
異步任務在event table中註冊函數,當滿足觸發條件後,被推入event queue
-
同步任務進入主線程後一直執行,直到主線程空閒時,纔會去event queue中查看是否有可執行的異步任務,如果有就推入主進程中
以上三步循環執行,這就是event loop。
所以上面的例子,你是否可以描述它的執行順序了呢?
-
console.log(1) 是同步任務,放入主線程裏
-
setTimeout() 是異步任務,被放入event table, 0秒之後被推入event queue裏
-
console.log(3 是同步任務,放到主線程裏
當 1、 3在控制條被打印後,主線程去event queue(事件隊列)裏查看是否有可執行的函數,執行setTimeout裏的函數。
3.JS中的event loop(2)
所以,上面關於event loop就是我對JS執行機制的理解,直到我遇到了下面這段代碼。
例2:
-
setTimeout(function(){
-
console.log('定時器開始啦')
-
});
-
-
new Promise(function(resolve){
-
console.log('馬上執行for循環啦');
-
for(var i = 0; i < 10000; i++){
-
i == 99 && resolve();
-
}
-
}).then(function(){
-
console.log('執行then函數啦')
-
});
-
-
console.log('代碼執行結束');
嘗試按照,上文我們剛學到的JS執行機制去分析:
-
setTimeout 是異步任務,被放到event table
-
new Promise 是同步任務,被放到主進程裏,直接執行打印 console.log('馬上執行for循環啦')
-
.then 裏的函數是異步任務,被放到event table
-
console.log('代碼執行結束') 是同步代碼,被放到主進程裏,直接執行
所以,結果是: 馬上執行for循環啦---代碼執行結束---定時器開始啦---執行then函數啦
嗎?
親自執行後,結果居然不是這樣,而是: 馬上執行for循環啦---代碼執行結束---執行then函數啦---定時器開始啦
那麼,難道是異步任務的執行順序,不是前後順序,而是另有規定?事實上,按照異步和同步的劃分方式,並不準確。
而準確的劃分方式是:
-
macro-task(宏任務):包括整體代碼script,setTimeout,setInterval
-
micro-task(微任務):Promise,process.nextTick
按照這種分類方式,JS的執行機制是:
-
執行一個宏任務,過程中如果遇到微任務,就將其放到微任務的“事件隊列”裏
-
當前宏任務執行完成後,會查看微任務的“事件隊列”,並將裏面全部的微任務依次執行完
-
重複以上2步驟,結合event loop(1) event loop(2),就是更爲準確的JS執行機制了
嘗試按照剛學的執行機制,去分析例2:
-
首先執行script下的宏任務,遇到setTimeout,將其放到宏任務的“隊列”裏
-
遇到 new Promise直接執行,打印"馬上執行for循環啦"
-
遇到then方法,是微任務,將其放到微任務的“隊列”裏。
-
打印 "代碼執行結束"
-
本輪宏任務執行完畢,查看本輪的微任務,發現有一個then方法裏的函數,打印"執行then函數啦"
-
到此,本輪的event loop 全部完成。
-
下一輪的循環裏,先執行一個宏任務,發現宏任務的“隊列”裏有一個setTimeout裏的函數,執行打印"定時器開始啦"
所以最後的執行順序是: 馬上執行for循環啦---代碼執行結束---執行then函數啦---定時器開始啦
4.談談setTimeout
這段setTimeout代碼什麼意思? 我們一般說: 3秒後,會執行setTimeout裏的那個函數
-
setTimeout(function(){
-
console.log('執行了')
-
},3000)
但是這種說並不嚴謹,準確的解釋是:3秒後,setTimeout裏的函數被會推入event queue,而event queue(事件隊列)裏的任務,只有在主線程空閒時纔會執行。
所以只有滿足 (1)3秒後 (2)主線程空閒,同時滿足時,纔會3秒後執行該函數
如果主線程執行內容很多,執行時間超過3秒,比如執行了10秒,那麼這個函數只能10秒後執行了。