JS執行機制

wow_worktile 發布于2019-08-26 13:36 / 3244人閱讀

摘要：事件表每次調用函數或執行異步操作時，都會將其添加到事件表中，事件表負責記錄每個事件完成后執行的回調函數，并監聽事件，事件完成后會把事件的回調函數發送到事件隊列。事件隊列事件隊列接收來自事件表的回調函數，并根據順序執行。

前言

先上一段代碼，可以根據自己之前對JS執行機制的理解，進行分析

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案：
script start
script end
promise1
promise2
setTimeout

如果自己的答案和上面的答案有出入，請繼續閱讀

基本概念的闡述

調用堆棧

JavaScript有一個多帶帶的調用堆棧，負責執行JS代碼，當即將執行一個函數時，此函數就會被添加到調用堆棧中，當此函數執行完，則會出棧。

事件表

每次調用setTimeout函數或執行異步操作時，都會將其添加到事件表中，事件表負責記錄每個事件完成后執行的回調函數，并監聽事件，事件完成后會把事件的回調函數發送到事件隊列。

事件隊列

事件隊列接收來自事件表的回調函數，并根據順序執行。事件隊列中存儲兩種任務：微任務和宏任務

在當前的微任務沒有執行完成時，是不會執行下一個宏任務的。
這里有兩種說法，一種說法把剛開始執行的整體JS代碼認為是一個宏任務，先執行整體JS代碼這一個宏任務，執行完成后，再執行微任務列表中的所有微任務，所以認為先執一個行宏任務再執行所有微任務

另外一種說法沒有把剛開始的JS代碼當做宏任務，所以起始執行的是微任務，所有微任務執行完再執行宏任務，認為先執行微任務再執行宏任務
其實兩種說法的核心是一樣的，都是執行一個宏任務執行所有微任務
事件循環

事件循環就是一個持續運行的進程，用于檢查調用堆棧是否為空。將我們上面所述連接起來，并循環執行。

JS執行機制

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

再次分析此段代碼
最初始狀態：JS調用棧為空，任務隊列中宏任務隊列有script代碼塊就緒
第一步：檢查調用棧為空，將宏任務script入棧，開始向下執行
第二步：當遇到異步操作時，執行異步，并將異步事件與其回調函數注冊到事件列表，同步代碼繼續執行
第三步：當事件表監聽到異步事件已經完成，將其事件的回調函數入隊（任務隊列）
第四步：檢查到調用棧為空，先將微任務依次入棧（調用堆棧）執行，微任務列表為空時，將宏任務入棧（調用堆棧）執行
更多關于JS執行機制的理解請點擊下面鏈接，有動畫效果有助于理解特別推薦
Tasks, microtasks, queues and schedules

云服務器 GPU云服務器 js執行機制執行機制 php執行的機制原理 JS調用棧機制

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

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

10分鐘理解JS引擎的執行機制

摘要：深入理解引擎的執行機制靈魂三問為什么是單線程的為什么需要異步單線程又是如何實現異步的呢中的中的說說首先請牢記點是單線程語言的是的執行機制。深入理解JS引擎的執行機制 1.靈魂三問 : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實現異步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.說說setTimeout 首先,請牢記2...

zzbo 2019-08-26 17:04 評論0 收藏0
深入理解js引擎的執行機制

摘要：深入理解引擎的執行機制最近在反省，很多知識都是只會用，不理解底層的知識。在閱讀之前，請先記住兩點是單線程語言的是的執行機制。所以，是存在異步執行的，比如單線程是怎么實現異步的場景描述通過事件循環，所以說，理解了機制，也就理解了的執行機制啦。深入理解js引擎的執行機制最近在反省，很多知識都是只會用，不理解底層的知識。所以在開發過程中遇到一些奇怪的比較難解決的bug，在思考的時候就會收...

feng409 2019-08-22 15:29 評論0 收藏0
前端進階系列(八):JS執行機制

摘要：一直以來，對的執行機制都是模棱兩可，知道今天看了文章這一次，徹底弄懂執行機制和的規范和實現，才對的執行機制有了深入的理解，下面是我的學習總結。個要點是單線程語言是的執行機制，為了實現主線程的不阻塞，就這么誕生了。一直以來，對JS的執行機制都是模棱兩可，知道今天看了文章—《這一次，徹底弄懂JavaScript執行機制》和《Event Loop的規范和實現》，才對JS的執行機制有了深入的...

JackJiang 2019-08-23 12:25 評論0 收藏0
Event Loop - JS執行機制

摘要：心塞塞根據規范，事件循環是通過任務隊列的機制來進行協調的。等便是任務源，而進入任務隊列的是他們指定的具體執行任務回調函數。然后當前本輪的結束，主線程可以繼續取下一個執行。依然是：經濟基礎決定上層建筑。說明首先，旨在搞清常用的同步異步執行機制其次，暫時不討論node.js的Event Loop執行機制，以下關于瀏覽器的Event Loop執行機制最后，借鑒了很多前輩的研究文...

muddyway 2019-08-22 17:32 評論0 收藏0
Javascript系列之javascript機制

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

13651657101 2019-08-22 15:50 評論0 收藏0