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

資訊專欄INFORMATION COLUMN

JavaScript執(zhí)行機(jī)制

ralap / 1496人閱讀

摘要：事件循環(huán)事件循環(huán)是實(shí)現(xiàn)異步的一種方法，也是的執(zhí)行機(jī)制。最后的最后是一門單線程語言是的執(zhí)行機(jī)制部分內(nèi)容轉(zhuǎn)自

1.單線程

javascript是一門單線程語言

2.javascript事件循環(huán)

同步任務(wù)

異步任務(wù)


除了廣義的同步任務(wù)和異步任務(wù)，我們對(duì)任務(wù)有更精細(xì)的定義：

macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval

micro-task(微任務(wù))：Promise，process.nextTick(類似node.js版的"setTimeout")



事件循環(huán)的順序，決定js代碼的執(zhí)行順序。進(jìn)入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。

console.log("1");

setTimeout(function() {
    console.log("2");
    process.nextTick(function() {
        console.log("3");
    })
    new Promise(function(resolve) {
        console.log("4");
        resolve();
    }).then(function() {
        console.log("5")
    })
})
process.nextTick(function() {
    console.log("6");
})
new Promise(function(resolve) {
    console.log("7");
    resolve();
}).then(function() {
    console.log("8")
})

setTimeout(function() {
    console.log("9");
    process.nextTick(function() {
        console.log("10");
    })
    new Promise(function(resolve) {
        console.log("11");
        resolve();
    }).then(function() {
        console.log("12")
    })
})

結(jié)果：整段代碼，共進(jìn)行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。
(請(qǐng)注意，node環(huán)境下的事件監(jiān)聽依賴libuv與前端環(huán)境不完全相同，輸出順序可能會(huì)有誤差)

3.Node與瀏覽器EventLoop的差異

瀏覽器和Node 環(huán)境下，microtask 任務(wù)隊(duì)列的執(zhí)行時(shí)機(jī)不同

Node端，microtask 在事件循環(huán)的各個(gè)階段之間執(zhí)行

瀏覽器端，microtask 在事件循環(huán)的 macrotask 執(zhí)行完之后執(zhí)行

例子：

setTimeout(()=>{
    console.log("timer1")
    Promise.resolve().then(function() {
        console.log("promise1")
    })
}, 0)
setTimeout(()=>{
    console.log("timer2")
    Promise.resolve().then(function() {
        console.log("promise2")
    })
}, 0)

瀏覽器端運(yùn)行結(jié)果：timer1=>promise1=>timer2=>promise2

Node端運(yùn)行結(jié)果分兩種情況：

如果是node11版本一旦執(zhí)行一個(gè)階段里的一個(gè)宏任務(wù)(setTimeout,setInterval和setImmediate)就立刻執(zhí)行微任務(wù)隊(duì)列，這就跟瀏覽器端運(yùn)行一致，最后的結(jié)果為timer1=>promise1=>timer2=>promise2

如果是node10及其之前版本：要看第一個(gè)定時(shí)器執(zhí)行完，第二個(gè)定時(shí)器是否在完成隊(duì)列中。

如果是第二個(gè)定時(shí)器還未在完成隊(duì)列中，最后的結(jié)果為timer1=>promise1=>timer2=>promise2
如果是第二個(gè)定時(shí)器已經(jīng)在完成隊(duì)列中，則最后的結(jié)果為timer1=>timer2=>promise1=>promise2

4.使用Promise實(shí)現(xiàn)串行

遞歸執(zhí)行：

簡單來說就是在 then 方法里面遞歸傳遞下一次異步方法：then(next())

循環(huán)調(diào)用：

這種辦法比較取巧，直接利用 Promise.resolve()。通過循環(huán)賦值，得到最終的結(jié)果。

5.為何try里面放return，finally還會(huì)執(zhí)行 6.如何在保證頁面運(yùn)行流暢的情況下處理海量數(shù)據(jù)

大致的執(zhí)行流程是：

用ajax獲取到需要處理的數(shù)據(jù)， 共13萬條

將數(shù)組分組，每組500條，一共260組

循環(huán)這260組數(shù)據(jù)，分別處理每一組數(shù)據(jù)， 利用setTimeout函數(shù)開啟一個(gè)新的執(zhí)行線程（異步），防止主線程因渲染大量數(shù)據(jù)導(dǎo)致阻塞。

總結(jié)： (1)js的異步

我們從最開頭就說javascript是一門單線程語言，不管是什么新框架新語法糖實(shí)現(xiàn)的所謂異步，其實(shí)都是用同步的方法去模擬的，牢牢把握住單線程這點(diǎn)非常重要。

(2)事件循環(huán)Event Loop

事件循環(huán)是js實(shí)現(xiàn)異步的一種方法，也是js的執(zhí)行機(jī)制。

(3)javascript的執(zhí)行和運(yùn)行

執(zhí)行和運(yùn)行有很大的區(qū)別，javascript在不同的環(huán)境下，比如node，瀏覽器，Ringo等等，執(zhí)行方式是不同的。而運(yùn)行大多指javascript解析引擎，是統(tǒng)一的。

(4)setImmediate

微任務(wù)和宏任務(wù)還有很多種類，比如setImmediate等等，執(zhí)行都是有共同點(diǎn)的，有興趣的同學(xué)可以自行了解。

(5)最后的最后

javascript是一門單線程語言
Event Loop是javascript的執(zhí)行機(jī)制

部分內(nèi)容轉(zhuǎn)自：
1).https://juejin.im/post/59e85e...
2).https://juejin.im/post/5b30b0...
3).https://zhuanlan.zhihu.com/p/...

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

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

相關(guān)文章

  • Javascript系列之javascript機(jī)制

    摘要：異步任務(wù)必須指定回調(diào)函數(shù)，當(dāng)異步任務(wù)從任務(wù)隊(duì)列回到執(zhí)行棧，回調(diào)函數(shù)就會(huì)執(zhí)行。事件循環(huán)主線程從任務(wù)隊(duì)列中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為。事件循環(huán)事件循環(huán)是指主線程重復(fù)從消息隊(duì)列中取消息執(zhí)行的過程。 參考鏈接：這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制https://zhuanlan.zhihu.com/p/...從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制...

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

  • JavaScript運(yùn)行機(jī)制和事件循環(huán)

    摘要：主線程不斷重復(fù)上面的三步，此過程也就是常說的事件循環(huán)。所以主線程代碼執(zhí)行時(shí)間過長，會(huì)阻塞事件循環(huán)的執(zhí)行。參考資料這一次，徹底弄懂執(zhí)行機(jī)制任務(wù)隊(duì)列的順序機(jī)制事件循環(huán)搞懂異步事件輪詢與中的事件循環(huán) 1. 說明 讀過本文章后，您能知道： JavaScript代碼在瀏覽器中的執(zhí)行機(jī)制和事件循環(huán) 面試中經(jīng)常遇到的代碼輸出順序問題 首先通過一段代碼來驗(yàn)證你是否了解代碼輸出順序，如果你不知道輸出...

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

  • 深入淺出JavaScript運(yùn)行機(jī)制

    摘要：主線程從任務(wù)隊(duì)列中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為事件循環(huán)。上面也提到，在到達(dá)指定時(shí)間時(shí)，定時(shí)器就會(huì)將相應(yīng)回調(diào)函數(shù)插入任務(wù)隊(duì)列尾部。這就是定時(shí)器功能。關(guān)于定時(shí)器的重要補(bǔ)充定時(shí)器包括與兩個(gè)方法。 一、引子 本文介紹JavaScript運(yùn)行機(jī)制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...

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

  • 深入淺出JavaScript運(yùn)行機(jī)制

    摘要：主線程從任務(wù)隊(duì)列中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為事件循環(huán)。上面也提到，在到達(dá)指定時(shí)間時(shí)，定時(shí)器就會(huì)將相應(yīng)回調(diào)函數(shù)插入任務(wù)隊(duì)列尾部。這就是定時(shí)器功能。關(guān)于定時(shí)器的重要補(bǔ)充定時(shí)器包括與兩個(gè)方法。 一、引子 本文介紹JavaScript運(yùn)行機(jī)制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...

    魏明 評(píng)論0 收藏0

  • 深入淺出JavaScript運(yùn)行機(jī)制

    摘要：主線程從任務(wù)隊(duì)列中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為事件循環(huán)。上面也提到，在到達(dá)指定時(shí)間時(shí)，定時(shí)器就會(huì)將相應(yīng)回調(diào)函數(shù)插入任務(wù)隊(duì)列尾部。這就是定時(shí)器功能。關(guān)于定時(shí)器的重要補(bǔ)充定時(shí)器包括與兩個(gè)方法。 一、引子 本文介紹JavaScript運(yùn)行機(jī)制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...

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

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

0條評(píng)論

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