js的事件循環

android_c 發布于2019-08-22 11:06 / 633人閱讀

摘要：但是事件循環一般會在主線程中任務執行完成之后執行。所以，上面函數的調用棧過程如下總結的事件循環部分，內容應該算是全部闡述完全了。

前言

還記得那些年面試官問你的定時器的原理嗎？還有呢？Promise的原理呢？原理、原理、原理，問的我們懷疑人生。

為了下次不再懵逼，今天，我們來了解一下Event Loop的概念。我們的初衷是真正的了解和掌握它，了解整體JavaScript的運行機制。至少，我們在看完文章的時候，不會讓我們在懷疑人生了。如果你喜歡我的文章，歡迎評論，歡迎Star~。歡迎關注我的github博客

正文

聊這一個話題，我們必須從JavaScript本身聊起。

為什么瀏覽器選擇了我

眾所周知，JavaScript是一門單線程語言。為什么會在瀏覽器端開發一門這樣子的單線程原因呢？原因就是——簡單。在瀏覽器端，復雜的UI環境會限制多線程語言的開發。例如，一個線程在操作一個DOM元素時，另一個線程需要去刪除DOM元素，這個之間就需要進行狀態的同步，何況前端可能不止操作這么一個DOM元素。所以，為了避免在開發過程中，去進行復雜的同步，選用單線程語言進行開發是最好的解決方案。

但是，單線程語言也會有問題——同步阻塞。舉個例子，cpu在執行程序的過程中，執行到IO操作，它會發送IO請求，之后等待數據返回，待數據返回之后才會繼續執行后面的任務，如圖。

這種問題在瀏覽器中，或許是致命的。因此，JavaScript在執行過程中，將任務分為同步任務和異步任務。

同步和異步的我

首先，我們來了解一下主線程的執行棧（call stack）。一個線程對應著一個執行棧，所有同步任務都會被放入到執行棧中執行，例如，我們有下面這樣子的一個程序：

function fun1(){
  return "hello hip-hop";
}

function fun2(){
  return fun1();
}

function fun3(){
  console.log(fun2());
}

fun3();   //"hello hip-hop"

調用棧執行過程：

或者我們使用另一種方法來論證一下：我們將fun1改成throw new Error("hello hip-hop")

function fun1(){
  throw new Error("hello hip-hop");
}

function fun2(){
  return fun1();
}

function fun3(){
  console.log(fun2());
}

fun3();

每次調用過程中，會有函數的出棧和入棧。這就是同步任務執行的過程，一個任務執行完成之后，執行下一個任務。那么，我們在來看一下另外一個例子：

console.log("first");
setTimeout(() => {
  console.log("second");
}, 500);
console.log("three");

我們依舊來看一下這個程序的調用棧的執行順序：

從圖中，我們可以看到setTimeout執行完成之后，已經出棧了，但是后來的console.log("second")又是如何入棧的呢？

其實，在主線程之外，還有一個任務隊列。在任務隊列中，會存放著異步任務，只有當指定事件發生之后，異步任務才會被放到主線程中執行。

其實，任務隊列中是一個事件隊列，那setTimeout舉例來說，當主線程執行setTimeout的時候，會創建一個定時器，一旦定時器的時間達到了，就會將其內部的回調函數，放入任務隊列中。然后，主線程在執行的最后去循環任務隊列。而回調函數，指的是主線程掛起的代碼，異步任務必須有回調函數才能執行接下來的操作。如圖：

事件循環

其實，上圖中，我們可以看到一個循環，如圖：

這是一個死循環，無論哪種情況都是閉環。其實，這就是事件循環。事件循環會不斷地去檢測任務隊列中是否還有已觸發時間的任務，如果有的話，就放入主線程中執行。但是事件循環一般會在主線程中任務執行完成之后執行。我們可以來看一下另一幅圖片：

這幅圖片中，我們可以看到完整的執行流程，其中涉及到的異步事件有DOM事件、ajax請求和setTimeout。所以，整體的執行流程是這樣子的：

（1）、所有同步任務會在主線程的調用棧中執行。
（2）、在主線程之外，還有一個任務隊列，一旦指定事件發生之后，異步任務就會被放入任務隊列中
（3）、當主線程執行完調用棧中的同步任務時，會遍歷任務隊列，將任務隊列中的任務放入主線程中執行。而之后事件循環一直會去遍歷任務隊列，一旦有任務放入就會放入主線程中執行。

這樣，我們就已經初步了解了同步和異步之間的實現，以及瀏覽器中的事件循環機制。

任務隊列的不同

自從ES6標準出來之后，Promise就被開發者關注到了。Promise是個很有意思的家伙，詳細講解的話，篇幅會太長。我們只關注它異步方面的任務隊列。

首先，我們來看一段程序：

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

Promise.resolve().then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
});

console.log(4);      // 4   2    3    1

你會對它的輸出感到疑惑嗎？相信經歷過面試的你一定會？還是兩個字——懵逼

其實，這個執行順序和任務隊列的種類有關系。我們一般一直稱呼地任務隊列（task queue），其實指的是Macrotasks。而Promise執行后會被放到Microtasks中。

Macrotasks => 一般會將dom事件、ajax事件和setTimeout放入到這個隊列中。

Microtasks => 一般會將Promise、process.nextTicks、MutationObserver放入這個隊列中。

在執行事件循環時，主線程會首先遍歷Microtasks，然后將隊列中的異步任務抽取出來執行，直至抽空整個隊列，才會去執行Macrotasks的隊列中的異步任務。

所以，上面函數的調用棧過程如下：

總結

js的事件循環部分，內容應該算是全部闡述完全了。希望對看的你，會有收獲。

如果你對我寫的有疑問，可以評論，如我寫的有錯誤，歡迎指正。你喜歡我的博客，請給我關注Star~呦

GPU云服務器云服務器 js事件循環機制 gpu python事件循環 js 5層以上的循環循環打印出倒敘的js

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

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

[譯]事件循環，Node.js背后的核心概念

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

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

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

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

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

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

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

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

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

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

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

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