資訊專欄INFORMATION COLUMN
摘要：的執行機制就是一個主線程一個任務隊列。同步任務就是放在主線程上執行的任務，異步任務就是放在任務隊列的任務。和上述運行的機制主要說明的是，而的出現及普及，又有了新的概念，，它的出現，進一步，中分為兩種任務類型和，在中，稱為，可稱為。
上一篇文章主要整理了一下js引擎是如何工作的，這篇文章主要整理js的事件循環Event loop，以及異步編程的原理事件循環Event loop
之前文章中有講到js是單線程的，而瀏覽器渲染內核包含多個線程的，和js代碼部分相關的線程有如下幾個：
js引擎線程
處理ajax請求的線程，
處理DOM事件的線程，
定時器，
讀寫文件的線程（Node.JS）等
因為JS是單線程的，這是從JS引擎的角度來看的，所謂的單線程就是指在JS引擎中負責解釋和執行JS代碼的線程只有一個：主線程。
js分為同步任務和異步任務，同步任務都在主線程上執行，就形成一個執行棧，主線程之外，事件觸發線程管理著一個任務隊列，只要異步任務有了運行結果，就在任務隊列中放置一個事件。一旦執行棧中所有的同步任務執行完畢（此時js引擎空閑），系統就會讀取任務隊列，將可運行的異步任務添加到可執行棧中，開始執行。
JS的執行機制就是一個主線程 + 一個任務隊列。同步任務就是放在主線程上執行的任務，異步任務就是放在任務隊列的任務。所有的同步任務都在主線程執行，這構成了一個執行棧，異步任務有了運行結果會在任務隊列中放置一個事件，比如定時2秒，到2秒后才能放進任務隊列（callback放進任務隊列，而不是setTimeout函數放進隊列）。
事件循環（Event Loop）—— 腳本運行時，先依次運行執行棧，然后從隊列中提取事件來運行任務隊列中的任務，這個過程是不斷重復的。所以叫事件循環（Event Loop）。
macrotask和microtask上述js運行的機制主要說明的是es5，而es6的出現及普及，又有了新的概念，promise，它的出現，進一步，JS中分為兩種任務類型：macrotask和microtask，在ECMAScript中，microtask稱為jobs，macrotask可稱為task。
分別很么樣的場景會形成macrotask和microtask呢？
macrotask：主代碼塊，setTimeout，setInterval, setImmediate, I/O, UI rendering. 等（可以看到，事件隊列中的每一個事件都是一個macrotask）
microtask： process.nextTick, Promise(原生)，Object.observe，MutationObserver
在node環境下，process.nextTick的優先級高于Promise，也就是可以簡單理解為：在宏任務結束后會先執行微任務隊列中的nextTickQueue部分，然后才會執行微任務中的Promise部分。總結下運行機制：
執行一個宏任務（棧中沒有就從事件隊列中獲取）
執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中
宏任務執行完畢后，立即執行當前微任務隊列中的所有微任務（依次執行）
當前宏任務執行完畢，開始檢查渲染，然后GUI線程接管渲染
渲染完畢后，JS線程繼續接管，開始下一個宏任務（從事件隊列中獲取）
案例說明案例1：
setImmediate(function(){
console.log(1);
},0);
setTimeout(function(){
console.log(2);
},0);
new Promise(function(resolve){
console.log(3);
resolve();
console.log(4);
}).then(function(){
console.log(5);
});
console.log(6);
process.nextTick(function(){
console.log(7);
});
console.log(8);
根據js的運行原理解釋上面代碼的執行順序：
第一步 script整體代碼被執行，執行過程為
創建setImmediate macro-task
創建setTimeout macro-task
創建micro-task Promise.then 的回調，并執行script console.log(3); resolve(); console.log(4); 此時輸出3和4，雖然resolve調用了，執行了但是整體代碼還沒執行完，無法進入Promise.then 流程。
console.log(6)輸出6
process.nextTick 創建micro-task
console.log(8) 輸出8
第一個過程過后，已經輸出了3 4 6 8
第二步 由于其他micro-task 的 優先級高于macro-task。
此時micro-task 中有兩個任務按照優先級process.nextTick 高于 Promise。 所以先輸出7，再輸出5
第三步 micro-task 任務列表已經執行完畢，家下來執行macro-task. 由于setTimeout的優先級高于setIImmediate，所以先輸出2，再輸出1。
參考：https://blog.csdn.net/gy_u_yg...
https://blog.csdn.net/m0_3775...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53508.html
摘要：的執行機制就是一個主線程一個任務隊列。同步任務就是放在主線程上執行的任務，異步任務就是放在任務隊列的任務。和上述運行的機制主要說明的是，而的出現及普及，又有了新的概念，，它的出現，進一步，中分為兩種任務類型和，在中，稱為，可稱為。 上一篇文章主要整理了一下js引擎是如何工作的，這篇文章主要整理js的事件循環Event loop，以及異步編程的原理 事件循環Event loop 之前文章...
摘要：引擎的運行原理引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發。為了提高運行速度，現代瀏覽器一般采用即時編譯即字節碼只在運行時編譯，用到哪一行就編譯哪一行，并且把編譯結果緩存這樣整個程序的運行速度能得到顯著提升。 相信大家在面試的過程中經常遇到查看執行順序的問題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實這些問題最...
摘要：引擎的運行原理引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發。為了提高運行速度，現代瀏覽器一般采用即時編譯即字節碼只在運行時編譯，用到哪一行就編譯哪一行，并且把編譯結果緩存這樣整個程序的運行速度能得到顯著提升。 相信大家在面試的過程中經常遇到查看執行順序的問題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實這些問題最...
閱讀 3414·2021-11-24 09:38
閱讀 3193·2021-11-22 09:34
閱讀 2106·2021-09-22 16:03
閱讀 2363·2019-08-29 18:37
閱讀 376·2019-08-29 16:15
閱讀 1767·2019-08-26 13:56
閱讀 862·2019-08-26 12:21
閱讀 2204·2019-08-26 12:15
