国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

理解JS中的Event Loop機(jī)制

MASAILA / 1089人閱讀

摘要：前言前幾天在理解的事件環(huán)機(jī)制中引發(fā)了我對(duì)瀏覽器里的好奇。接下來(lái)理解瀏覽器中的，先看一張圖堆和棧堆是用戶主動(dòng)請(qǐng)求而劃分出來(lái)的內(nèi)存區(qū)域，比如你，就是將一個(gè)對(duì)象存入堆中，可以理解為存對(duì)象。廢話不多說(shuō)，直接上圖個(gè)人理解。參考資料運(yùn)行機(jī)制詳解再談

前言

前幾天在理解node的事件環(huán)機(jī)制中引發(fā)了我對(duì)瀏覽器里Event Loop的好奇。我們都知道javascript是單線程的，任務(wù)是需要一個(gè)一個(gè)按順序執(zhí)行的，如果javascript有兩個(gè)線程，一個(gè)為DOM增加樣式，一個(gè)卻要?jiǎng)h除DOM，這樣豈不是就會(huì)很混亂。單線程可以節(jié)約內(nèi)存，但是必須等待前一個(gè)任務(wù)完成后才能執(zhí)行下一個(gè)任務(wù)。接下來(lái)理解瀏覽器中的Event Loop，先看一張圖：

heap（堆）和stack（棧）

heap（堆）是用戶主動(dòng)請(qǐng)求而劃分出來(lái)的內(nèi)存區(qū)域，比如你new Object()，就是將一個(gè)對(duì)象存入堆中，可以理解為heap存對(duì)象。
stack（棧）是由于函數(shù)運(yùn)行而臨時(shí)占用的內(nèi)存區(qū)域，函數(shù)都存放在棧里。

Event Loop實(shí)現(xiàn)過(guò)程

在上一張圖中:
1、所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧；
2、只要異步任務(wù)有了運(yùn)行結(jié)果，就在任務(wù)隊(duì)列（task queue）（隊(duì)列是一個(gè)先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，而棧是一個(gè)先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)）之中放置一個(gè)事件；
3、一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取任務(wù)隊(duì)列,又將隊(duì)列中的事件放到stack中依次執(zhí)行，就是執(zhí)行異步任務(wù)中的回調(diào)函數(shù)。這個(gè)過(guò)程是循環(huán)不斷的，這就是Event Loop(事件循環(huán))；

宏任務(wù)和微任務(wù)

在上張圖中，我們看到還有宏任務(wù)（MacroTask）和微任務(wù)（MicroTask）之分。
宏任務(wù)（MacroTask）
setTimeout setInterval
微任務(wù)（MicroTask）
Promise.then MessageChannel微任務(wù)(vue中nextTick實(shí)現(xiàn)原理)
同步任務(wù)先執(zhí)行，遇到微任務(wù) 就將微任務(wù)放入執(zhí)行棧 微任務(wù)會(huì)先執(zhí)行，再執(zhí)行宏任務(wù)，

先看一下圖（個(gè)人理解）

舉例說(shuō)明 
console.log(1);
setTimeout(function(){
    console.log(2);
    new Promise(function(resolve,reject){
        console.log("promise");
        resolve();
    }).then(res=>{
        console.log("promise.then");
    })
});
setTimeout(function(){
        console.log(4);
    })
console.log(5);

將這行代碼放入瀏覽器控制臺(tái)中

分析一下：
執(zhí)行棧中同步任務(wù)先執(zhí)行，先走console.log(1)和console.log(5)；
接著是遇到setTimeout將它們的回調(diào)函數(shù)放入MacroTask(宏任務(wù)隊(duì)列)；
然后將任務(wù)隊(duì)列中的回調(diào)函數(shù)依次放入主執(zhí)行棧中執(zhí)行，console.log(2)，接著promise是立即執(zhí)行，promise.then是微任務(wù)放入MicroTask中先執(zhí)行；
最后執(zhí)行第二個(gè)setTimeout的回調(diào)函數(shù)console.log(4)；

Node.js的Event Loop

瀏覽器中的Event Loop和node的Event Loop有所不同，先來(lái)看看區(qū)別：

在node環(huán)境里，執(zhí)行棧會(huì)先執(zhí)行完當(dāng)前任務(wù)隊(duì)列，也就是兩個(gè)setTimeout中的回調(diào)函數(shù)執(zhí)行完才會(huì)去執(zhí)行我們的微任務(wù)隊(duì)列，也就是promise.then是最后執(zhí)行的，是不是很奇怪。

請(qǐng)看下面的示意圖（作者 @BusyRich）。

這里需要注意一下，node新加了一個(gè)微任務(wù)(process.nextTick)和一個(gè)宏任務(wù)(setImmediate)

簡(jiǎn)單的來(lái)說(shuō)，就是node在處理一個(gè)執(zhí)行隊(duì)列的時(shí)候不管怎樣都會(huì)先執(zhí)行完當(dāng)前隊(duì)列，然后再清空微任務(wù)隊(duì)列，再去執(zhí)行下一個(gè)隊(duì)列。

廢話不多說(shuō)，直接上圖（個(gè)人理解）。

這里應(yīng)該都明白了吧，最后注意一下，微任務(wù)中process.nextTick比promise.then快

水平不足，歡迎各位指正。

參考資料

JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93431.html

相關(guān)文章

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

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

    zzbo 評(píng)論0 收藏0

  • 深入理解js引擎的執(zhí)行機(jī)制

    摘要：深入理解引擎的執(zhí)行機(jī)制最近在反省，很多知識(shí)都是只會(huì)用，不理解底層的知識(shí)。在閱讀之前，請(qǐng)先記住兩點(diǎn)是單線程語(yǔ)言的是的執(zhí)行機(jī)制。所以，是存在異步執(zhí)行的，比如單線程是怎么實(shí)現(xiàn)異步的場(chǎng)景描述通過(guò)事件循環(huán)，所以說(shuō)，理解了機(jī)制，也就理解了的執(zhí)行機(jī)制啦。 深入理解js引擎的執(zhí)行機(jī)制 最近在反省，很多知識(shí)都是只會(huì)用，不理解底層的知識(shí)。所以在開(kāi)發(fā)過(guò)程中遇到一些奇怪的比較難解決的bug，在思考的時(shí)候就會(huì)收...

    feng409 評(píng)論0 收藏0

  • JavaScript執(zhí)行機(jī)制、事件循環(huán)

    摘要：曾經(jīng)的理解首先，是單線程語(yǔ)言，也就意味著同一個(gè)時(shí)間只能做一件事，那么為什么不是多線程呢這樣還能提高效率啊假定同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)節(jié)點(diǎn)上編輯了內(nèi)容，而另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器就很懵逼了，到底以執(zhí)行哪個(gè)操作呢所以，設(shè)計(jì)者把 Event Loop曾經(jīng)的理解 首先，JS是單線程語(yǔ)言，也就意味著同一個(gè)時(shí)間只能做一件事，那么 為什么JavaScript不是多線程呢？這樣還能提...

    rose 評(píng)論0 收藏0

  • 初窺JavaScript事件機(jī)制的實(shí)現(xiàn)（一）—— Node.js事件驅(qū)動(dòng)實(shí)現(xiàn)概覽

    摘要：如果當(dāng)前沒(méi)有事件也沒(méi)有定時(shí)器事件，則返回。相關(guān)資料關(guān)于的架構(gòu)及設(shè)計(jì)思路的事件討論了使用線程池異步運(yùn)行代碼。下一篇初窺事件機(jī)制的實(shí)現(xiàn)二中定時(shí)器的實(shí)現(xiàn) 在瀏覽器中，事件作為一個(gè)極為重要的機(jī)制，給予JavaScript響應(yīng)用戶操作與DOM變化的能力；在Node.js中，事件驅(qū)動(dòng)模型則是其高并發(fā)能力的基礎(chǔ)。 學(xué)習(xí)JavaScript也需要了解它的運(yùn)行平臺(tái)，為了更好的理解JavaScript的事...

    lavor 評(píng)論0 收藏0

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

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

    LittleLiByte 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<