1、什么是JavaScript引擎

JavaScript引擎是一個(gè)計(jì)算機(jī)程序，它的主要作用是JavaScript運(yùn)行時(shí)將源碼編譯為機(jī)器碼。

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

• Google Chrome V8。

• Mozilla Firefox Spider Monkey。

• Safari Javascript Core Webkit。

• Edge (Internet Explorer)

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

2、V8引擎

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

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

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

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

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

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

3、運(yùn)行時(shí)環(huán)境

瀏覽器運(yùn)行環(huán)境中，瀏覽器提供了Web API，如：HTTP請(qǐng)求，計(jì)時(shí)器，事件等。

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

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

stack
heap
call stack
callback queue
event loop

4、運(yùn)行時(shí)的調(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、異步任務(wù)

JavaScript先執(zhí)行了 print 函數(shù)，然后調(diào)用Web API setTimeout() ，Web API存儲(chǔ)了 setTimeout() 的回調(diào)函數(shù)，3秒后將回調(diào)函數(shù)添加到回調(diào)隊(duì)列，事件循環(huán)發(fā)現(xiàn)調(diào)用棧為空，于是將隊(duì)列里的回調(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、總結(jié)

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

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