初識JavaScript EventLoop

ZHAO_ 發布于2019-08-22 13:55 / 1045人閱讀

摘要：指的是計算機系統的一種運行機制。環境中的執行順序是隨機的這一次，徹底弄懂執行機制的規范和實現

Event Loop指的是計算機系統的一種運行機制。JavaScript采用此機制解決單線程引發相關問題

在瀏覽器中的web應用會涉及到.JavaScript引擎、WebAPI、Event Loop、Task Queue (Macro Task, Micro Task).因此如果想弄清Event Queue.我們必須都以上都有所了解.

JavaScript引擎:

目前市面上解析JavaScript文件效率最高的就是Google的V8引擎.它主要由兩個部分組成:

內存堆: 負責內存分配發生的地方.

調用堆棧: 代碼執行時堆棧幀的位置.(是一種數據結構,記錄了程序的基本位置.先進后出)

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

當引擎開始執行此代碼時，調用堆棧將為空。之后，步驟如下

并發和事件循環

JavaScript是一門單線程語言.因此只有一個單一的調用堆棧,并且一次只能做一件事,當我們進行一些復雜的耗時操作(圖形轉換)時.瀏覽器就無法進行其他事情,無法渲染任何內容.也不能運行其它代碼.

為了解決瀏覽器被阻塞的問題,JavaScript提供了一種解決方案異步回調函數（asynchronous callback functions）.異步函數在解析過程中不會被立即執行,會被瀏覽器放入Task Queue

Task Queue 分為 Macrotask, Microtask

Event Loop 每執行一次先從Macrotask隊列中拉出一個.然后檢查microtask隊列是否為空.依次執行直至清空隊列.

Macrotask主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件

microtask主要包含：Promise、process.nextTick、MutaionObserver

process.nextTick 永遠大于 promise.then.

Node中，_tickCallback在每一次執行完TaskQueue中的一個任務后被調用，而這個_tickCallback中實質上干了兩件事：

nextTickQueue中所有任務執行掉(長度最大1e4，Node版本v6.9.1)

第一步執行完后執行_runMicrotasks函數，執行microtask中的部分(promise.then注冊的回調)

自測

console.log("1");

process.nextTick(function() {
    console.log("4");
});

setTimeout(function() {
    console.log("6");
    process.nextTick(function() {
        console.log("7");
    });
}, 0);

new Promise(function(resolve, reject) {
    console.log("2");
    resolve();
}).then(function() {
    console.log("5");
});

console.log("3");

setImmediate和setTimeout的延遲設為0，或1的時候，他們的執行順序是隨機的。

setTimeout(() => {
    console.log(2)
}, 2)

setTimeout(() => {
    console.log(1)
}, 1)

setTimeout(() => {
    console.log(0)
}, 0)
// 谷歌瀏覽器環境中的執行順序是1 0 2。
// Node環境中的執行順序是隨機的

What is the JavaScript event loop?

How JavaScript works: an overview of the engine, the runtime, and the call stack

這一次，徹底弄懂 JavaScript 執行機制

Event Loop的規范和實現

云服務器 GPU云服務器 eventloop docker初識初識關系數據庫 javascript

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

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

JS核心知識點梳理——異步，單線程，運行機制

摘要：引言學習的時候，經常聽人說，即是異步的，又是單線程的。所以我們說是異步單線程的。參考從瀏覽器多進程到單線程，運行機制最全面的一次梳理運行機制詳解再談異步機制詳解運行原理解析并發模型與事件循環 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言學習javascipt的時候，經常聽人說，javascipt即是異步...

TANKING 2019-08-26 13:55 評論0 收藏0
js運行機制-事件循環EventLoop

js運行機制-事件循環EventLoop 先來看看一段js代碼： console.log(script begin) setTimeout(() => { console.log(setTimeout) },0) new Promise((resolve) => { console.log(promise begin) for(let i = 0; i < 1000; i...

jayce 2019-08-26 13:33 評論0 收藏0
淺析 JS 中的 EventLoop 事件循環（新手向）

摘要：同時，如果執行的過程中發現其他函數，繼續入棧然后執行。上面我們討論的其實都是同步代碼，代碼在運行的時候只用調用棧解釋就可以了。序 Event Loop 這個概念相信大家或多或少都了解過，但是有一次被一個小伙伴問到它具體的原理的時候，感覺自己只知道個大概印象，于是計劃著寫一篇文章，用輸出倒逼輸入，讓自己重新學習這個概念，同時也能幫助更多的人理解它~ 概念 JavaScript 是一門 ...

chadLi 2019-08-26 13:58 評論0 收藏0
JavaScript同步、異步及事件循環

摘要：同步異步是單線程的，每次只能做一件事情。像以下這種情況，代碼會按順序執行，這個就叫同步。雖然是單線程，但是瀏覽器是多線程的，在遇到像事件等這種任務時，會轉交給瀏覽器的其他工作線程上面提到的幾個線程執行，執行完之后將回調函數放入到任務隊列。同步、異步 JS是單線程的，每次只能做一件事情。像以下這種情況，代碼會按順序執行，這個就叫同步。 console.log(1); console.l...

zr_hebo 2019-08-23 14:17 評論0 收藏0