JS JavaScript事件循環機制

dantezhao 發布于2019-08-23 14:49 / 3468人閱讀

摘要：事件循環機制首先區分進程和線程進程是資源分配的最小單位系統會給它分配內存不同的進程之間是可以同學的，如管道命名管道消息隊列一個進程里有單個或多個線程瀏覽器是多進程的，因為系統給它的進程分配了資源內存打開會有一個主進程，每打開一個頁就有一個獨

JS JavaScript事件循環機制 首先區分進程和線程

進程是cpu資源分配的最小單位（系統會給它分配內存）

不同的進程之間是可以同學的，如管道、FIFO(命名管道)、消息隊列

一個進程里有單個或多個線程

瀏覽器是多進程的，因為系統給它的進程分配了資源（cpu、內存）（打開Chrome會有一個主進程，每打開一個Tab頁就有一個獨立的進程）

瀏覽器的渲染進程是多線程的

GUI渲染線程

JS引擎線程

事件觸發線程

定時觸發器線程

異步HTTP請求線程

事件循環機制

上圖解釋：

同步和異步任務分別進入不同的執行"場所"，同步的進入主線程，異步的進入Event Table并注冊函數

當指定的事情完成時，Event Table會將這個函數移入Event Queue

當棧中的代碼執行完畢，執行棧（call stack）中的任務為空時，就會讀取任務隊列（Event quene）中的事件，去執行對應的回調

如此循環，形成js的事件循環機制（Event Loop）

宏任務（macrotask）和微任務（microtask）

先看一段代碼的執行結果：

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

JS中分為兩種任務類型：macrotask和microtask，在ECMAScript中，microtask稱為jobs，macrotask可稱為task

macrotask（又稱之為宏任務），可以理解是每次執行棧執行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調并放到執行棧中執行）

每一個task會從頭到尾將這個任務執行完畢，不會執行其它

瀏覽器為了能夠使得JS內部task與DOM任務能夠有序的執行，會在一個task執行結束后，在下一個 task 執行開始前，對頁面進行重新渲染（task->渲染->task->...）

microtask（又稱為微任務），可以理解是在當前 task 執行結束后立即執行的任務

也就是說，在當前task任務后，下一個task之前，在渲染之前

所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染

也就是說，在某一個macrotask執行完后，就會將在它執行期間產生的所有microtask都執行完畢（在渲染前）

分別什么樣的場景會形成macrotask和microtask呢？

macrotask：主代碼塊，setTimeout，setInterval等（可以看到，事件隊列中的每一個事件都是一個macrotask）

microtask：Promise，process.nextTick等

補充：在node環境下，process.nextTick的優先級高于Promise，也就是可以簡單理解為：在宏任務結束后會先執行微任務隊列中的nextTickQueue部分，然后才會執行微任務中的Promise部分。

總結下運行機制：

執行一個宏任務（棧中沒有就從事件隊列中獲取）

執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中

宏任務執行完畢后，立即執行當前微任務隊列中的所有微任務（依次執行）

當前宏任務執行完畢，開始檢查渲染，然后GUI線程接管渲染

渲染完畢后，JS線程繼續接管，開始下一個宏任務（從事件隊列中獲取）

如圖：

GPU云服務器云服務器 js事件循環機制 gpu 事件機制事件冒泡機制事件注冊機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101187.html

JavaScript運行機制和事件循環

摘要：主線程不斷重復上面的三步，此過程也就是常說的事件循環。所以主線程代碼執行時間過長，會阻塞事件循環的執行。參考資料這一次，徹底弄懂執行機制任務隊列的順序機制事件循環搞懂異步事件輪詢與中的事件循環 1. 說明讀過本文章后，您能知道： JavaScript代碼在瀏覽器中的執行機制和事件循環面試中經常遇到的代碼輸出順序問題首先通過一段代碼來驗證你是否了解代碼輸出順序，如果你不知道輸出...

Ververica 2019-08-23 14:42 評論0 收藏0
Javascript系列之javascript機制

摘要：異步任務必須指定回調函數，當異步任務從任務隊列回到執行棧，回調函數就會執行。事件循環主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為。事件循環事件循環是指主線程重復從消息隊列中取消息執行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
JS瀏覽器事件循環機制

摘要：事件循環機制事件循環機制分為瀏覽器和事件循環機制，兩者的實現技術不一樣，瀏覽器是中定義的規范，是由庫實現。整個事件循環完成之后，會去檢測微任務的任務隊列中是否存在任務，存在就執行。文章來自我的 github 博客，包括技術輸出和學習筆記，歡迎star。先來明白些概念性內容。進程、線程進程是系統分配的獨立資源，是 CPU 資源分配的基本單位，進程是由一個或者多個線程組成的。線...

zebrayoung 2019-08-22 18:33 評論0 收藏0
JS與Node.js中的事件循環

摘要：的單線程，與它的用途有關。特點的顯著特點異步機制事件驅動。隊列的讀取輪詢線程，事件的消費者，的主角。它將不同的任務分配給不同的線程，形成一個事件循環，以異步的方式將任務的執行結果返回給引擎。這兩天跟同事同事討論遇到的一個問題，js中的event loop，引出了chrome與node中運行具有setTimeout和Promise的程序時候執行結果不一樣的問題，從而引出了Nodejs的...

abson 2019-08-22 11:14 評論0 收藏0
這一次，徹底弄懂 JavaScript 執行機制

摘要：事件完成，回調函數進入。主線程從讀取回調函數并執行。終于執行完了，終于從進入了主線程執行。遇到，立即執行。宏任務微任務第三輪事件循環宏任務執行結束，執行兩個微任務和。事件循環事件循環是實現異步的一種方法，也是的執行機制。本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥，不論是面試求職，還是日常開發工作...

dreambei 2019-08-23 15:21 評論0 收藏0