詳解JavaScript執行模型

JavaScript執行模型

引言

JavaScript是一個單線程（Single-threaded）異步（Asynchronous）非阻塞（Non-blocking）并發（Concurrent）語言，這些語言效果通過一個調用棧（Call Stack）、一個事件循環（Event Loop）、一個回調隊列（Callback Queue）有些時候也叫任務隊列（Task Queue）與跟運行環境相關的API組成。

概念

調用棧 Call Stack

調用棧是一個LIFO后進先出數據結構的函數運行棧，它內部的數據結構為函數幀。當在JavaScript中調用一個函數時，它將被壓入棧中，當這個函數內部還有另一個函數被調用時，另一個函數將會被壓入棧頂，直到其內部沒有更多調用，棧頂函數將會被以單線程方式執行并出棧，直到最后一個函數幀出棧。JavaScript語言特性中的單線程就是指的調用棧的單線程運行。

function multiply(a, b) { return a * b;}function square(n) { return multiply(n, n)}function printSquare(n) { console.log(square(n));}printSquare(4);

首先調用棧壓入main()，掃描到printSquare()函數調用調用棧壓入printSquare(4)，printSquare函數內部調用square(n)該函數被壓入棧，同理multiply(n, n)函數也被壓入棧且沒有更多調用，JavaScript引擎開始執行棧頂函數multiply(n, n)返回結果并出棧，以此類推直到main()函數出棧。

調用棧有一個意外情況，當函數遞歸調用其自身時調用棧將溢出，執行環境將報錯。

function foo() { foo();}foo();

任務隊列 Task Queue

任務隊列是WebAPI的一部分，也就是說它本身并不是ECMAScript標準的一部分，而是運行環境自行實現的。任務隊列是所有回調函數排隊執行的FIFO先進先出隊列，它的單位是任務（Task），每個任務都關聯著一個用于處理這個任務的回調函數。在事件循環（Event Loop）中會將任務隊列內的函數壓入調用棧執行并出隊列，直至為空。

任務隊列在瀏覽器的實現中被分為了宏任務隊列（macrotask queue）和微任務隊列（microtask queue），它們分別個自承載宏任務（macrotask）和微任務（microtask）的排隊，其中宏任務隊列與宏任務又被默認為常規的任務隊列與任務。

當調用棧內所有調用都完成執行后，事件輪詢會在每次處理宏任務隊列的一個宏任務后處理微任務隊列的全部微任務，也就是微任務基本會在宏任務處理之前被處理。微任務處理中間不會被UI或網絡事件處理被執行，微任務執行是連續的。

會被添加到宏任務的方法的回調有：

script：script標簽中的代碼解析運行 setTimeout setInterval setImmediate I/O UI rendering：UI渲染，每16.6ms放到隊列上一次，60fps，如果調用棧被占用則會被阻塞

會被添加到微任務的Web API方法有：

會被添加到微任務的Web API方法有：

process.nextTick：Node提供的 Promise Object.observe MutationObserver

微任務只會從我們編寫的代碼中產生，宏任務既可能從我們編寫的代碼中產生也可能從瀏覽器本身事件、渲染、IO產生。

事件循環 Event Loop

事件循環是JavaScript的事件處理機制，它會一直輪詢消息隊列，當滿足調用棧為空且消息隊列不為空時，它將把消息隊列隊頭的消息壓入執行棧。這樣的機制保證了函數不會被中斷，不會有線程切換帶來的數據不一致等情況

事件循環在調用棧為空時輪詢，順序為

1.找到任務隊列（宏任務隊列）的最早被添加的任務并將其添加到調用棧執行

2.執行所有微任務隊列內的任務

當微任務隊列不為空時找到微任務隊列最早被添加的任務并將其添加到調用棧執行

3.渲染所有變化4.如果宏任務隊列為空等待宏任務出現5.返回步驟1

JavaScript運行時 Runtime

瀏覽器的JavaScript代碼執行也就是調用棧與堆（用于儲存變量對象等）由JavaScript引擎提供，用的比較多的是谷歌的V8引擎，Chrome、Edge瀏覽器、Nodejs均使用該引擎。

事件循環Event Loop、任務隊列Task Queue（回調隊列Callback Queue）、WebAPI或Node API由運行環境提供。

以上就是詳解JavaScript執行模型的詳細內容，更多關于JavaScript執行模型的資料請關注好吧啦網其它相關文章！