參考文章：深入理解JS引擎的執行機制? ? ? ??JavaScript 異步、棧、事件循環、任務隊列

我的筆記：ES系列之Promise async 和 await

Event Loop

前提

• js是單線程的

• js的Event Loop是JS的執行機制，深入了解JS的執行,就等于深入了解JS里的event loop。

問：js是為單線程的，為什么要實現異步，單線程怎么實現異步？

答：1、js的單線程能夠保證對DOM操作的順序性，如果是多線程，A線程編輯DOM上的內容，B線程刪除該DOM，那么，瀏覽器該怎么執行了。

2、因為js是自上而下執行的，如果上一行解析很長時間，下面的代碼解析不了，造成頁面卡死。

3、通過事件循環機制實現異步

js的Event Loop1

demo1

console.log(1)setTimeout(function () {console.log(2) }, 0)console.log(3)

執行結果：1 3 2

首先我們知道，js將任務分為同步任務和異步任務。

js的執行機制：

判斷當前執行代碼是同步還是異步的，同步就進入主線程執行，異步就放到event table。

然后異步任務在event loop中注冊函數，當滿足條件后，就被推進event queue。

同步任務進入主線程一直執行，知道主線程空閑時，才會去event queue中查看是否有客執行的異步任務，如果有就推入主線程中。

?

js的Event Loop2

<script> console.log('1'); setTimeout(function(){console.log('2') });new Promise(function(resolve){console.log('3');for(var i = 0; i < 10000; i++){i == 99 && resolve();} }).then(function(){console.log('4') });console.log('5'); </script>

按照上面的分析，執行順序為：1 5 2 3 4；但是實際的執行順序為：1 3 5 4 2

這是為什么呢？

這是因為，js將任務分為宏任務（macro-task）和微任務（micro-task）：

宏任務包括：script標簽、setTimeout、setInterval

微任務包括：Promise，process.nextTick

?

執行到script標簽進入宏任務，然后執行

setTimeout為宏任務，放在任務隊列中，等待該宏任務以及該宏任務中的微任務執行完畢后執行

Promise準備開啟微任務，但是沒有開啟，.then()進入微任務，等待該宏任務執行完畢后執行該微任務

setTimeout

setTimeout(function(){console.log('執行了')},3000)

我們一般說以上代碼會在3s后執行，但是準確的解釋是: 3秒后,setTimeout里的函數被會推入event queue,而event queue(事件隊列)里的任務,只有在主線程空閑時才會執行。

如果主線程執行了5s，那么以上代碼會在5s，以及事件隊列的前面的微任務執行完畢后執行。

轉載于:https://www.cnblogs.com/houfee/p/10550406.html

總結

以上是生活随笔為你收集整理的JS高级学习笔记（6）- 事件循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。