1、什么是JavaScript引擎

JavaScript引擎是一個計算機程序，它的主要作用是JavaScript運行時將源碼編譯為機器碼。

每個主流Web瀏覽器都有自己的JavaScript引擎，它通常由web瀏覽器供應商開發(fā)。

• Google Chrome V8。

• Mozilla Firefox Spider Monkey。

• Safari Javascript Core Webkit。

• Edge (Internet Explorer)

以前的JavaScript引擎主要在web瀏覽器使用，不過隨著nodejs的出現(xiàn)就打破了這種局限。

2、V8引擎

V8包含了解析器（parser），解釋器（Ignition），優(yōu)化編譯器（TurboFan ）。

解析器（parser）：用于生成抽象語法樹。

解釋器（Ignition）：將源碼轉(zhuǎn)換為字節(jié)碼。

優(yōu)化編譯器（TurboFan ）：進行一些優(yōu)化編譯優(yōu)化處理，比如內(nèi)聯(lián)緩存。

下面是V8引擎的大體工作流程。

• 首先 解析器 先生成一個抽象語法樹。
• 然后 解釋器 根據(jù)語法樹生成V8格式的字節(jié)碼。
• 優(yōu)化編譯器 再將字節(jié)碼編譯成機器碼。

3、運行時環(huán)境

瀏覽器運行環(huán)境中，瀏覽器提供了Web API，如：HTTP請求，計時器，事件等。

服務器運行環(huán)境中，nodejs提供了API。

下面是JavaScript在瀏覽器中運行時的架構，它包含一個內(nèi)存堆、一個內(nèi)存棧、一個事件循環(huán)、一個回調(diào)隊列。

stack
heap
call stack
callback queue
event loop

4、運行時的調(diào)用棧

下面代碼展示了JavaScript執(zhí)行的調(diào)用棧變化。

function add(x, y) {
    return x + y;
}

function print(x, y) {
    console.log('x+y=',add(x, y))
}

print(1, 3)

5、異步任務

JavaScript先執(zhí)行了 print 函數(shù)，然后調(diào)用Web API setTimeout() ，Web API存儲了 setTimeout() 的回調(diào)函數(shù)，3秒后將回調(diào)函數(shù)添加到回調(diào)隊列，事件循環(huán)發(fā)現(xiàn)調(diào)用棧為空，于是將隊列里的回調(diào)函數(shù)移至調(diào)用棧執(zhí)行。

function add(x, y) {
    return x + y;
}

function print(x, y) {
    setTimeout(function (){
        console.log('x+y=',add(x, y))
    }, 3000)
}

print(1, 3)

6、總結

JavaScript運行主要依靠JavaScript引擎和運行環(huán)境， 引擎 將js源碼翻譯成計算機所理解的機器碼， 運行環(huán)境 提供了一些與計算機底層通訊的API和運行實現(xiàn)。

到此這篇關于前端 JavaScript運行原理的文章就介紹到這了,更多相關JavaScript運行原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論