js的Event Loop機制解析

alexnevsky 發布于2019-08-22 16:33 / 2286人閱讀

摘要：概述最近看了一些異步的文章，有一些作者沒有寫代碼也把錯誤的理解放上來。棧主線程的函數執行，異步操作的執行放在了異步處理模塊。這里面的棧，僅僅是代表了調用棧。

概述

最近看了一些異步的文章，有一些作者沒有寫代碼也把錯誤的理解放上來。想想，我也應該總結一些，之前面試也有過一道題目，雖然說是考察異步，但其實就是考察異步當中的任務隊列。給你一道題目，你覺得會依次輸出什么？

console.log("1")

Promise.resolve().then(() => console.log("2"))

setTimeout(() => {console.log("3"); Promise.resolve().then(() => console.log("4"))}, 0)

Promise.resolve().then(() => console.log("5"))

setTimeout(() => console.log("6"), 0)

console.log("7")

答案是

1 7 2 5 3 4 6

如果你知道為什么會輸出這些的話，那我想你不必看下面了，因為你也有大概的理解，如果沒有的話，我就跟你分析一下吧。

先看一張圖吧，是拿別人的，有部分原因也是因為他寫的文章有錯誤，我才總結。

先理解這張圖片吧，我簡單介紹一下。

棧：主線程的函數執行，異步操作的執行放在了異步處理模塊。

堆：用來存儲引用類型的指向。

異步處理模塊：主線程里面的異步模塊。

任務隊列：存儲異步線程的執行隊列。

然后，js運行就是運行主線程->運行任務隊列

當然，這只是大概的介紹，真正的堆和棧并不是和他說的一樣，棧里面還有內存棧和調用棧，內存棧又有全局的內存棧，也有某個函數的內存棧，當然，函數內部的內存棧又放在了堆里面。這里面的棧，僅僅是代表了調用棧。

宏任務隊列（macrotasks）

什么是宏任務隊列？

宏任務隊列macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering

上面的基本操作就是宏任務隊列

微任務隊列（microtasks）

微任務隊列microtasks: process.nextTick, Promise, MutationObserver

上面的基本操作就是微任務隊列

Event Loop

我就簡單的說一下js里面執行順序吧:

執行主線程，如果有異步操作，則放到異步隊列執行。執行2

當主線程執行完畢，判斷異步隊列是否有微任務，如果有，則添加進去主線程執行；如果沒有則將最新可以執行的宏任務加進主線程。返回1

是不是很簡單？
那么上面那道題的結果無非就是

// 一開始，主線程
console.log("1");
console.log("7");

// 下一步，主線程
Promise.resolve().then(() => console.log("2"))

// 下一步，主線程
Promise.resolve().then(() => console.log("5"))

// 下一步，主線程
setTimeout(() => {console.log("3")}, 0)

// 下一步，主線程
Promise.resolve().then(() => console.log("4"))

// 下一步，主線程
setTimeout(() => console.log("6"), 0)

總結

看了一下很多文章，以為很難，很想畫圖，但是在寫的過程中，發現其實真的很簡單，只要好好了解js里面的引擎就好了，js還是一個很強大的單線程語言。

GPU云服務器云服務器 Event Loop js的event詳解 js_Event event事件 js

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

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

Javascript 運行機制詳解，Event Loop

摘要：主線程在任務隊列中讀取事件，這個過程是循環不斷地，所以這種運行機制叫做事件循環是在執行棧同步代碼結束之后，下一次任務隊列執行之前。單線程 javascript為什么是單線程語言，原因在于如果是多線程，當一個線程對DOM節點做添加內容操作的時候，另一個線程要刪除這個DOM節點，這個時候，瀏覽器應該怎么選擇，這就造成了混亂，為了解決這類問題，在一開始的時候，javascript就采用單線...

Jingbin_ 2019-08-23 10:39 評論0 收藏0
10分鐘理解JS引擎的執行機制

摘要：深入理解引擎的執行機制靈魂三問為什么是單線程的為什么需要異步單線程又是如何實現異步的呢中的中的說說首先請牢記點是單線程語言的是的執行機制。深入理解JS引擎的執行機制 1.靈魂三問 : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實現異步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.說說setTimeout 首先,請牢記2...

zzbo 2019-08-26 17:04 評論0 收藏0
瀏覽器與Node的事件循環(Event Loop)有何區別?

摘要：事件觸發線程主要負責將準備好的事件交給引擎線程執行。它將不同的任務分配給不同的線程，形成一個事件循環，以異步的方式將任務的執行結果返回給引擎。 Fundebug經作者浪里行舟授權首發，未經同意請勿轉載。前言本文我們將會介紹 JS 實現異步的原理，并且了解了在瀏覽器和 Node 中 Event Loop 其實是不相同的。一、線程與進程 1. 概念我們經常說 JS 是單線程執行的，...

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

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

Anshiii 2019-08-22 18:07 評論0 收藏0
【轉】深入理解JS單線程機制【原文作者：MasterYao】

摘要：的單線程，與它的用途有關。只要指定過回調函數，這些事件發生時就會進入任務隊列，等待主線程讀取。四主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。令人困惑的是，文檔中稱，指定的回調函數，總是排在前面。原文：http://www.cnblogs.com/Master... 一、為什么JavaScript是單線程？ JavaScript語言的一大特點...

LittleLiByte 2019-08-20 14:39 評論0 收藏0