摘要：中叫做調(diào)用棧先進(jìn)后出，后進(jìn)先出。如下圖這是典型的內(nèi)存溢出，可能會出現(xiàn)在某些場景下需要遞歸，但業(yè)務(wù)邏輯中的判斷又沒能正常計算進(jìn)入到預(yù)設(shè)情況，于是調(diào)用棧中不斷進(jìn)入，又無法執(zhí)行完，就造成內(nèi)存溢出了。

本文主要介紹Javascript事件循環(huán)在瀏覽器上的一些特性和應(yīng)用介紹。

JavaScript的并發(fā)模型基于"事件循環(huán)"(Event Loop)。這個模型與像C或者Java這種其它語言中的模型截然不同。它永不阻塞，處理I/O通常通過事件和回調(diào)來執(zhí)行，所以當(dāng)一個應(yīng)用正等待IndexedDB查詢返回或者一個XHR請求返回時，它仍然可以處理其它事情，如用戶輸入?！緟ⅲ翰l(fā)模型與事件循環(huán)】

單線程編程語言(Single Threaded)

只有一個主線程(one thread)，并且只有一個調(diào)用棧(Call Stack)，因此同一時間只能執(zhí)行同一件事情?！緟ⅲ篜hilip Roberts: What the heck is the event loop anyway? | JSConf EU (4:15)】

執(zhí)行上下文(Execution Context)

Javascript代碼執(zhí)行時，會進(jìn)入一個執(zhí)行上下文。它可以理解為當(dāng)前代碼的運(yùn)行環(huán)境（包括三種：全局環(huán)境、函數(shù)環(huán)境、Eval環(huán)境）?！緟ⅲ篔avascript核心技術(shù)開發(fā)解密 Page-11】

糾正一點分享會可能存在的錯誤，它和作用域(Scope)不同！作用域是針對變量的一個可訪問區(qū)域，而執(zhí)行上下文是屬于函數(shù)的指向的對象。（Scope pertains to the visibility of variables, and context refers to the object to which a function belongs.）【參：Why Should We Care About Scope and Context ?】

棧（stack）

函數(shù)調(diào)用形成了一個棧幀。JavaScript中叫做調(diào)用棧(Call Stack)；先進(jìn)后出，后進(jìn)先出(LIFO)。

堆（heap）

對象被分配在一個堆中，即用以表示一個大部分非結(jié)構(gòu)化的內(nèi)存區(qū)域。

隊列（queue）

一個JavaScript運(yùn)行時包含了一個待處理的消息隊列。每一個消息都有一個為了處理這個消息相關(guān)聯(lián)的函數(shù)。

任務(wù)（Task）

主要是隊列中要執(zhí)行的函數(shù)。主要包含以下兩大類：

macrotask：包含執(zhí)行整體的js代碼，事件回調(diào)，XHR回調(diào)，定時器（setTimeout/setInterval/setImmediate），IO操作，UI render

microtask：更新應(yīng)用程序狀態(tài)的任務(wù)，包括promise回調(diào)，MutationObserver，process.nextTick，Object.observe

// This is assuming that you"re using jQuery
jQuery.ajax({
  url: "https://api.example.com/endpoint",
  success: function(response) {
    // This is your callback.
  },
  async: false // And this is a terrible idea
});
// 原文網(wǎng)址：https://itw01.com/2Z6WE2L.html

這里使用了JQuery的Ajax函數(shù)，并為參數(shù)設(shè)置為同步執(zhí)行。那么將遇到一種可怕的情況，這段代碼在success回調(diào)前，后面的Javascript代碼將不再執(zhí)行。也就造成了可怕的阻塞(blocking)。

let bar = 0
function foo() {
  bar++
  if (bar > 0) {
    return foo()
  }
}
foo()

沒錯，如果你不暈，說明你太棒了。這段代碼也會產(chǎn)生嚴(yán)重的問題。如下圖：

這是典型的內(nèi)存溢出，可能會出現(xiàn)在某些場景下需要遞歸，但業(yè)務(wù)邏輯中的判斷又沒能正常計算進(jìn)入到預(yù)設(shè)情況，于是調(diào)用棧中不斷進(jìn)入foo()，又無法執(zhí)行完，就造成內(nèi)存溢出了。

糾正一處分享會中的錯誤，這個入棧過程沒有任何函數(shù)退出，所以會只進(jìn)不出，導(dǎo)致內(nèi)存爆炸。另外道哥提到的不斷累加到最大值為負(fù)數(shù)的情況，我測試了一下JS下，會變成Infinite。某些其他語言（例如：C）是會變成-1，和二進(jìn)制進(jìn)位有關(guān)。

setTimeout(() => {
  console.log(1);
}, 0);
console.log(2);
for (let i = 0; i < 3; i++) {
  console.log(i);
}
console.log(4);

輸出結(jié)果：

A: 1, 2, 0, 1, 2, 4
B: 2, 4, 0, 1, 2, 1
C: 2, 0, 1, 2, 4, 1
D: 2, 4, 0, 1, 2, 1

console.log(1);
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log("2-" + i);
  }, 0);
}
console.log(3);

輸出結(jié)果：

A: 1, 2-2, 2-2, 2-2, 3
B: 1, 3, 2-2, 2-2, 2-2
C: 1, 2-0, 2-1, 2-2, 3
D: 1, 3, 2-0, 2-1, 2-2

我想大家應(yīng)該都正確答出來了吧:D，接下來我將詳細(xì)分析一些示例，以便于理解事件循環(huán)。

這里我借用了作者稀土掘金的深入理解事件迴圈和非同步流程控制文中的一段示范。

console.log("Hi")
setTimeout(function cb1() {
  console.log("cb1")
}, 5000)
console.log("Bye")

不論是否懂得事件循環(huán)的初學(xué)者，看到這段代碼應(yīng)該也能猜出來答案是： Hi Bye cb1。畢竟cb1有一個5s的定時器。但是執(zhí)行細(xì)節(jié)是怎樣的呢。我們來看下面這張gif圖。

圖中已經(jīng)很清楚的展示了整個Javascript代碼是如何運(yùn)作的。相信大家已經(jīng)有較大的收獲了。

我們來看這個頁面中的Javascript部分：

function one() {
  throw new Error("Oops!")
}
function two() {
  one()
}
function three() {
  two()
}
three()

我們在瀏覽器端執(zhí)行時，打個斷點在throw new Error("Oops!")這一行。如下圖：

在了解了事件循環(huán)的執(zhí)行順序后，我們可以輕松知道他的執(zhí)行順序，通過Chrome開發(fā)者工具、我們觀察圖中Call Stack區(qū)域，箭頭指向的one也正是我們斷點的地方，下面依次是two、three、(anonymous)，這個是完全符合棧的先進(jìn)后出，后進(jìn)先出(last-in-first-out)的特征~

我們在實際開發(fā)中，也可以通過Call Stack里面觀察，找出上一層入口，分析異常原因。會有很大的幫助呢~

接著關(guān)閉斷點繼續(xù)執(zhí)行，瀏覽器會拋出錯誤，錯誤信息如下，也是符合棧特點的

該文章中有部分內(nèi)容在我制作的PPT中并未體現(xiàn)出來，對于這次分享會，我對Javascript一些運(yùn)行機(jī)制有更深的理解，由于時間倉促也就在本次分享做了一點入門介紹。下期我將會結(jié)合更多的示例，對Node.js的事件循環(huán)與瀏覽器端的差異等等進(jìn)行更深入的介紹，當(dāng)大家都有所收獲后，就大可忘記了。

深入理解js事件循環(huán)機(jī)制（瀏覽器篇） ★★★★☆

深入理解事件迴圈和非同步流程控制 ★★★★☆

Philip Roberts: What the heck is the event loop anyway? | JSConf EU ★★★★★

這是一段來自Youtube的演講視頻，視頻中有用到一個工具"loupe - 模擬執(zhí)行順序的工具"，值得研究！ ★★★★★

Tasks, microtasks, queues and schedules ★★★★★

文中有例子通過動畫來展示執(zhí)行順序問題感覺超級棒！也對不通瀏覽器的結(jié)果有做分析，當(dāng)然也許部分內(nèi)容有些不一致，需要注意。

[The JavaScript Event Loop [Presentation]](https://thomashunter.name/pos...

JS事件循環(huán)PPT - Whidy

JavaScript Event Loop - Thomas Hunter

JS Event Loop - Sonle

All you need to know about the JavaScript event loop - @sasatatar & @codaxy

全部整包下載