Javascript運行機制

alighters 發(fā)布于2019-08-02 16:10 / 1903人閱讀

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

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

為什么是單線程？

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

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

單線程的缺點

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

什么是Event Loop（事件循環(huán)）

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

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

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

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

每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務

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

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

一旦執(zhí)行棧中的所有同步任務執(zhí)行完畢，系統(tǒng)就會讀取“任務隊列”。

任務隊列是一個先進先出的數(shù)據(jù)結構，排在前面的事件，優(yōu)先被主線程讀取。

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

宏任務和微任務

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

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

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

根據(jù)上述總結流程為：

附（宏/微任務清單）：

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

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

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

~~目前宏任務和微任務在各瀏覽器執(zhí)行都有差異，最后提議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執(zhí)行主線程任務：輸出 2 4

附：Promise構造器內(nèi)部是同步任務

執(zhí)行微任務隊列：輸入 3

第一個宏任務結束，進入setTimeout回調(diào)：輸出 1

End

持續(xù)更新中 來Github 點顆?吧

返回主頁

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/54794.html

Javascript系列之javascript機制

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

13651657101 2019-08-22 15:50 評論0 收藏0
深入淺出JavaScript運行機制

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

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

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

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

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

chaosx110 2019-08-23 12:36 評論0 收藏0
JavaScript運行機制和事件循環(huán)

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

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