成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js的Event Loop機制解析

alexnevsky / 2294人閱讀

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

概述

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

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

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

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

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

棧：主線程的函數(shù)執(zhí)行，異步操作的執(zhí)行放在了異步處理模塊。

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

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

任務(wù)隊列：存儲異步線程的執(zhí)行隊列。

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

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

宏任務(wù)隊列（macrotasks） 
什么是宏任務(wù)隊列？

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

上面的基本操作就是宏任務(wù)隊列

微任務(wù)隊列（microtasks）

微任務(wù)隊列microtasks: process.nextTick, Promise, MutationObserver

上面的基本操作就是微任務(wù)隊列

Event Loop

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

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

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

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

// 一開始，主線程
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)
總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94447.html

相關(guān)文章

  • Javascript 運行機制詳解，Event Loop

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

    Jingbin_ 評論0 收藏0

  • 10分鐘理解JS引擎的執(zhí)行機制

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

    zzbo 評論0 收藏0

  • 瀏覽器與Node的事件循環(huán)(Event Loop)有何區(qū)別?

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

    TANKING 評論0 收藏0

  • Js 的事件循環(huán)(Event Loop)機制以及實例講解

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

    Anshiii 評論0 收藏0

  • 【轉(zhuǎn)】深入理解JS單線程機制【原文作者：MasterYao】

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

    LittleLiByte 評論0 收藏0

發(fā)表評論

0條評論

alexnevsky

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<