js事件循環機制

wuyangnju 發布于2019-08-22 11:15 / 2054人閱讀

摘要：為了利用多核的計算能力，提出標準，允許腳本創建多個線程，但是子線程完全受主線程控制，且不得操作。所以，這個新標準并沒有改變單線程的本質。

從一個例子說起

var start = new Date()

setTimeout(function () {
    var end = new Date
    console.log("Time elapsed:", end - start, "ms")
}, 500)

while (new Date() - start < 1000) {
}

有其他語言能完成預期的功能嗎？Java, 在Java.util.Timer中，對于定時任務的解決方案是通過多線程手段實現的，任務對象存儲在任務隊列，由專門的調度線程，在新的子線程中完成任務的執行

js是單線程的

JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。

為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。

函數調用棧和任務隊列

調用棧

JS執行時會形成調用棧,調用一個函數時,返回地址、參數、本地變量都會被推入棧中,如果當前正在運行的函數中調用另外一個函數,則該函數相關內容也會被推入棧頂.該函數執行完畢,則會被彈出調用棧.變量也隨之彈出,由于復雜類型值存放于堆中,因此彈出的只是指針,他們的值依然在堆中,由GC決定回收.

事件循環（event loop） & 任務隊列（task queue）

JavaScript 主線程擁有一個執行棧以及一個任務隊列

遇到異步操作（例如：setTimeout, AJAX）時，異步操作會由瀏覽器(OS)執行，瀏覽器會在這些任務完成后，將事先定義的回調函數推入主線程的任務隊列(task queue)中,當主線程的執行棧清空之后會讀取task queue中的回調函數,當task queue被讀取完畢之后,主線程接著執行,從而進入一個無限的循環,這就是事件循環.

主線程執行棧 & 任務隊列循環執行，構成事件循環

結論

setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在setTimeout()指定的時間執行。

另一個例子

(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);
})()

Macrotask & Microtask

macrotask 和 microtask 是異步任務的兩種分類。在掛起任務時，JS 引擎會將所有任務按照類別分到這兩個隊列中，首先在 macrotask 的隊列（這個隊列也被叫做 task queue）中取出第一個任務，執行完畢后取出 microtask 隊列中的所有任務順序執行；之后再取 macrotask 任務，周而復始，直至兩個隊列的任務都取完。

macro-task: script（整體代碼）, setTimeout, setInterval, setImmediate, I/O, UI rendering

micro-task: process.nextTick, Promises（這里指瀏覽器實現的原生 Promise）, Object.observe, MutationObserver

結論

全部代碼(script) macrotask -> microtask queue (含有promise.then) -> macrotask(setTimeout) -> 下一個microtask

Node.js的事件循環 process.nextTick & setImmediate

process.nextTick指定的任務總是發生在所有異步任務之前

setImmediate指定的任務總是在下一次Event Loop時執行

process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log("TIMEOUT FIRED");
}, 0)

new Promise(function(resolve) {
    console.log("glob1_promise");
    resolve();
}).then(function() {
    console.log("glob1_then")
})
process.nextTick(function() {
    console.log("glob1_nextTick");
})

總結

通過學習函數調用棧，任務隊列，MacroTask, MicroTask等概念，對js中的事件循環機制有更深的理解，在以后面對setTimeout, setInterval等異步操作時，更清晰的理解其運行機制，避免寫出不可控的代碼。

參考鏈接：

https://zhuanlan.zhihu.com/p/...

http://www.ruanyifeng.com/blo...

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

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

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

JavaScript運行機制和事件循環

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

Ververica 2019-08-23 14:42 評論0 收藏0
Js 的事件循環(Event Loop)機制以及實例講解

摘要：主線程要明確的一點是，主線程跟執行棧是不同概念，主線程規定現在執行執行棧中的哪個事件。主線程循環即主線程會不停的從執行棧中讀取事件，會執行完所有棧中的同步代碼。以上參考資料詳解中的事件循環機制中的事件循環運行機制詳解再談 showImg(https://segmentfault.com/img/remote/1460000015317437?w=1920&h=1080); 前言大家都...

Anshiii 2019-08-22 18:07 評論0 收藏0
【Node.js】理解事件循環機制

摘要：前沿是基于引擎的運行環境具有事件驅動非阻塞等特點結合具有網絡編程文件系統等服務端的功能用庫進行異步事件處理線程的單線程含義實際上說的是執行同步代碼的主線程一個程序的啟動不止是分配了一個線程，而是我們只能在一個線程執行代碼當出現資源調用連接等前沿 Node.js 是基于V8引擎的javascript運行環境. Node.js具有事件驅動, 非阻塞I/O等特點. 結合Node API, ...

Riddler 2019-08-21 17:52 評論0 收藏0
JS瀏覽器事件循環機制

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

zebrayoung 2019-08-22 18:33 評論0 收藏0
淺談不同環境下的JavaScript執行機制 + 示例詳解

摘要：如果沒有其他異步任務要處理比如到期的定時器，會一直停留在這個階段，等待請求返回結果。執行的執行事件關閉請求的，例如事件循環的每一次循環都需要依次經過上述的階段。因此，才會早于執行。 showImg(https://segmentfault.com/img/bVbnY76); 概念同步任務（Synchronous）在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務 ...

wanghui 2019-08-23 15:04 評論0 收藏0
JS JavaScript事件循環機制

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

dantezhao 2019-08-23 14:49 評論0 收藏0