JavaScript執行機制

ralap 發布于2019-08-23 18:17 / 1493人閱讀

摘要：事件循環事件循環是實現異步的一種方法，也是的執行機制。最后的最后是一門單線程語言是的執行機制部分內容轉自

1.單線程

javascript是一門單線程語言

2.javascript事件循環

同步任務

異步任務

除了廣義的同步任務和異步任務，我們對任務有更精細的定義：

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

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

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

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")
    })
})

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

3.Node與瀏覽器EventLoop的差異

瀏覽器和Node 環境下，microtask 任務隊列的執行時機不同

Node端，microtask 在事件循環的各個階段之間執行

瀏覽器端，microtask 在事件循環的 macrotask 執行完之后執行

例子：

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

瀏覽器端運行結果：timer1=>promise1=>timer2=>promise2

Node端運行結果分兩種情況：

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

如果是node10及其之前版本：要看第一個定時器執行完，第二個定時器是否在完成隊列中。

如果是第二個定時器還未在完成隊列中，最后的結果為timer1=>promise1=>timer2=>promise2
如果是第二個定時器已經在完成隊列中，則最后的結果為timer1=>timer2=>promise1=>promise2

4.使用Promise實現串行

遞歸執行：

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

循環調用：

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

5.為何try里面放return，finally還會執行 6.如何在保證頁面運行流暢的情況下處理海量數據

大致的執行流程是：

用ajax獲取到需要處理的數據，共13萬條

將數組分組，每組500條，一共260組

循環這260組數據，分別處理每一組數據，利用setTimeout函數開啟一個新的執行線程（異步），防止主線程因渲染大量數據導致阻塞。

總結： (1)js的異步

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

(2)事件循環Event Loop

事件循環是js實現異步的一種方法，也是js的執行機制。

(3)javascript的執行和運行

執行和運行有很大的區別，javascript在不同的環境下，比如node，瀏覽器，Ringo等等，執行方式是不同的。而運行大多指javascript解析引擎，是統一的。

(4)setImmediate

微任務和宏任務還有很多種類，比如setImmediate等等，執行都是有共同點的，有興趣的同學可以自行了解。

(5)最后的最后

javascript是一門單線程語言
Event Loop是javascript的執行機制

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

云服務器 GPU云服務器執行機制 js執行機制 php執行的機制原理 javascript機制

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

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

Javascript系列之javascript機制

摘要：異步任務必須指定回調函數，當異步任務從任務隊列回到執行棧，回調函數就會執行。事件循環主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為。事件循環事件循環是指主線程重復從消息隊列中取消息執行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
JavaScript運行機制和事件循環

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

Ververica 2019-08-23 14:42 評論0 收藏0
深入淺出JavaScript運行機制

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

mochixuan 2019-08-02 11:52 評論0 收藏0
深入淺出JavaScript運行機制

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

魏明 2019-08-29 17:06 評論0 收藏0
深入淺出JavaScript運行機制

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

chaosx110 2019-08-23 12:36 評論0 收藏0