Javascript運行機制

alighters 發布于2019-08-02 16:10 / 1858人閱讀

摘要：理解的運行機制是日常編碼必須要掌握的技能。什么是事件循環為了協調事件用戶交互腳本渲染和網絡處理等行為，防止主線程阻塞。主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。

Javascript是一種單線程開發語言。理解Javascript的運行機制是日常編碼必須要掌握的技能。

為什么是單線程？

JavaScript的主要用途是與用戶交互，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。

假設：如果JavaScript支持多線程，一個線程在某個DOM節點上添加內容，另外一個線程刪除了這個節點，那么瀏覽器該以哪個線程為準呢？

單線程的缺點

單線程就意味著容易發生線程等待資源，cpu空閑，而其他任務一直等待的問題。

什么是Event Loop（事件循環）

為了協調事件、用戶交互、腳本、UI 渲染和網絡處理等行為，防止主線程阻塞。于是Javascript設計者將所有任務分為兩種，一種是同步任務，一種是異步任務

同步任務指的是，在主線程上排隊執行的任務

同步任務只有前一個任務執行完畢，才能執行下一個任務。

同步任務都在主線程上執行，形成一個執行棧

每次執行棧執行的代碼就是一個宏任務

異步任務指的是，不進入主線程，而進入任務隊列的任務。

只要指定過回調函數，這些事件發生時就會進入"任務隊列"（比如鼠標點擊...等）

一旦執行棧中的所有同步任務執行完畢，系統就會讀取“任務隊列”。

任務隊列是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。

"主線程"從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環）。

宏任務和微任務

根據規范：每個任務都有一個任務源(task source)，源自同一個任務源的 task 必須放到同一個任務隊列，從不同源來的則被添加到不同隊列，所以有了宏任務(macro)task和微任務(micro)task。

瀏覽器為了能夠使得JS內部(macro)task與DOM任務能夠有序的執行，會在一個task執行結束后，在下一個(macro)task 執行開始前，對頁面進行重新渲染，

每次執行完一個宏任務之后，會去檢查是否存在微任務；如果有，則執行微任務直至清空微任務隊列，如果在微任務執行期間微任務隊列加入了新的微任務，會將新的微任務加入隊列尾部，之后也會被執行。

根據上述總結流程為：

附（宏/微任務清單）：

宏任務(macro)task主要有： script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)

微任務(micro)task主要有： Promise.then、MutaionObserver、process.nextTick(Node.js 環境)

requestAnimationFrame 既不屬于宏任務, 也不屬于微任務

~~目前宏任務和微任務在各瀏覽器執行都有差異，最后提議promise為微任務~~

實例分析

    setTimeout(function(){
        console.log("1");
    });

    new Promise(function(resolve){
        console.log("2");
        resolve();
    }).then(function(){
        console.log("3");
    });

    console.log("4");

以上案例會輸出 2 4 3 1

結果解析：

JavaScript執行主線程任務：輸出 2 4

附：Promise構造器內部是同步任務

執行微任務隊列：輸入 3

第一個宏任務結束，進入setTimeout回調：輸出 1

End

持續更新中 來Github 點顆?吧

返回主頁

GPU云服務器云服務器運行機制 nodejs運行機制 php 運行機制 php的運行機制

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

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

Javascript系列之javascript機制

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

13651657101 2019-08-22 15:50 評論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
JavaScript運行機制和事件循環

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

Ververica 2019-08-23 14:42 評論0 收藏0