js事件循環(huán)

elarity 發(fā)布于2019-08-23 18:39 / 2480人閱讀

摘要：每一個程序都擁有唯一的事件循環(huán)，大多數(shù)代碼的執(zhí)行順序是可以根據(jù)函數(shù)調用棧的規(guī)則執(zhí)行的，而或者不同的事件綁定等中的代碼，則通過隊列來執(zhí)行。當所有可執(zhí)行的執(zhí)行完畢之后，就表示第一次事件循環(huán)結束第二次循環(huán)會再次從開始執(zhí)行。

console.log("begin");
setTimeout(function() { console.log("timeout") });
new Promise(function(resolve) {
    for (let i = 0; i < 3; i++) {
        if (i == 1) resolve();
        console.log(i);
    }
    console.log("promise")
}).then(function() {
    console.log("then")
})
console.log("end");

上述代碼依次輸出：begin、0、1、2、promise、end、then、timeout

js的一個特點就是單線程，但是很多時候我們仍然需要在不同的時間去執(zhí)行不同的任務，例如給元素添加點擊事件，設置一個定時器，或者發(fā)起ajax請求，因此需要一個異步機制來達到這樣的目的，事件循環(huán)機制也因此而來。

每一個js程序都擁有唯一的事件循環(huán)，大多數(shù)代碼的執(zhí)行順序是可以根據(jù)函數(shù)調用棧的規(guī)則執(zhí)行的，而setTimeout/setInterval或者不同的事件綁定（click、mousedown等）中的代碼，則通過隊列來執(zhí)行。

任務隊列又分為宏任務（macro-task）與微任務（micro-task）兩種，在瀏覽器中，包括：

macro-task：script（整體代碼）、setTimeout/setInterval、I/O、UI rendering等

micro-task：Promise、MutationObserver

事件循環(huán)的順序，決定了js代碼的執(zhí)行順序：
首先從macro-task中的script開始第一次循環(huán)。此時全局上下文進入函數(shù)調用棧，直到調用棧清空，在這個過程中，如果遇到任務分發(fā)器（例如timer、promise），就會將任務放入對應隊列中去

第一次循環(huán)時，macro-task中其實只有script，因此函數(shù)調用棧清空之后，會直接執(zhí)行所有的micro-task。當所有可執(zhí)行的micro-task執(zhí)行完畢之后，就表示第一次事件循環(huán)結束

第二次循環(huán)會再次從macro-task開始執(zhí)行。此時macro-task中的script隊列已經(jīng)沒有任務了，但是可能會有其他的隊列任務，而micro-task中暫時還沒有任務。此時會先選擇其中一個宏任務隊列，例如setTimeout，將該隊列中所有的任務全部執(zhí)行完畢，然后再執(zhí)行此過程中可能產(chǎn)生的微任務。微任務執(zhí)行完畢之后，再回過頭來執(zhí)行其他宏任務隊列中的任務。以此類推，直到所有宏任務隊列中的任務都被執(zhí)行了，并且清空了微任務，第二次循環(huán)就會結束

如果在第二次循環(huán)過程中，產(chǎn)生了新的宏任務隊列，或者之前宏任務隊列中的任務暫時沒有滿足執(zhí)行條件，例如延遲時間不夠或者事件沒有被觸發(fā)，那么將會繼續(xù)以同樣的順序重復循環(huán)

GPU云服務器云服務器 js事件循環(huán)機制 gpu python事件循環(huán) js循環(huán) js 循環(huán)數(shù)據(jù)

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

轉載請注明本文地址：http://m.hztianpu.com/yun/105627.html

[譯]事件循環(huán)，Node.js背后的核心概念

摘要：事件處理器，則是當指定事件觸發(fā)時，執(zhí)行的一段代碼。事件循環(huán)以一個無限循環(huán)的形式啟動，存在于二進制文件里函數(shù)的最后，當沒有更多可被執(zhí)行的事件處理器時，它就退出。前言如果你了解過Node.js，那么你一定聽說過事件循環(huán)。你一定想知道它為什么那么特殊，并且為什么你需要關注它？此時此刻的你，可能已經(jīng)寫過許多基于Express.js的后端代碼，但沒有接觸到任何的循環(huán)。在下文中，我們會先在一...

Meils 2019-08-21 10:41 評論0 收藏0
Node.js 指南（Node.js事件循環(huán)、定時器和process.nextTick()）

摘要：檢索新的事件執(zhí)行與相關的回調幾乎所有，除了由定時器調度的一些和將在適當?shù)臅r候在這里阻塞。在事件循環(huán)的每次運行之間，檢查它是否在等待任何異步或定時器，如果沒有，則徹底關閉。 Node.js事件循環(huán)、定時器和process.nextTick() 什么是事件循環(huán)？事件循環(huán)允許Node.js執(zhí)行非阻塞I/O操作 — 盡管JavaScript是單線程的 — 通過盡可能將操作卸載到系統(tǒng)內核。 ...

pingink 2019-08-26 12:22 評論0 收藏0
JavaScript事件循環(huán)(Event Loop)

摘要：事件循環(huán)的順序，決定代碼執(zhí)行的順序。輸出第二輪事件循環(huán)正式結束三第三輪事件循環(huán)第三輪事件循環(huán)從宏任務開始。記為遇到，立即執(zhí)行回調函數(shù)放入中注冊，然后被分發(fā)到微任務事件隊列中。 1、為什么要有事件循環(huán)？因為js是單線程的，事件循環(huán)是js的執(zhí)行機制，也是js實現(xiàn)異步的一種方法。既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業(yè)務，同理js任務也要一個一個順序執(zhí)行。如...

dmlllll 2019-08-23 14:52 評論0 收藏0
【筆記】你不知道的JS讀書筆記——異步

摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態(tài)變更時，如果設置有回調函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調再放入事件循環(huán)隊列中。基礎：瀏覽器 -- 多進程，每個tab頁獨立一個瀏覽器渲染進程（瀏覽器內核）每個瀏覽器渲染進程是多線程的，主要包括：GUI渲染線程 JS引擎線程也稱為JS內核，負責處理Javascript腳本程序。（例如V8引擎） JS引擎線程負...

junnplus 2019-08-22 15:43 評論0 收藏0
Javascript事件循環(huán)機制以及渲染引擎何時渲染UI

摘要：的一大特點就是單線程，而這個線程中擁有唯一的一個事件循環(huán)。事件循環(huán)基本概念代碼的執(zhí)行過程中，除了依靠函數(shù)調用棧來搞定函數(shù)的執(zhí)行順序外，還依靠任務隊列來搞定另外一些代碼的執(zhí)行。之后全局上下文進入函數(shù)調用棧。 JavaScript的一大特點就是單線程，而這個線程中擁有唯一的一個事件循環(huán)。事件循環(huán)基本概念 JavaScript代碼的執(zhí)行過程中，除了依靠函數(shù)調用棧來搞定函數(shù)的執(zhí)行順序外，還...

cnio 2019-08-26 11:40 評論0 收藏0
真正理解 Node.js 的事件循環(huán)

摘要：輪詢投票處理下一次處理的新事件立即設置運行通過注冊的所有回調關閉執(zhí)行所有的回調工作處理延遲此度量標準測量線程池處理異步任務需要多長時間。高工作時間處理延遲表明繁忙耗盡的線程池。原文=> What you should know to really understand the Node.js Event Loop Node.js 是一個基于事件的平臺。這就意味著在Node中發(fā)生的所...

GeekGhc 2019-08-22 15:15 評論0 收藏0