為網(wǎng)頁(yè)編寫程式碼有時(shí)感覺有點(diǎn)神奇，因?yàn)槲覀冊(cè)谖募芯帉懽衷蛄?，在瀏覽器中開啟該文件，然後觀看它的實(shí)作。但了解魔法背後的技術(shù)可以幫助你更好地磨練你作為程式設(shè)計(jì)師的手藝。

在本文中，您將透過掌握支援瀏覽器的 JavaScript 引擎的複??雜性，了解 JavaScript 驅(qū)動(dòng)的 Web 或行動(dòng)堆疊幕後發(fā)生的事情。讓我們來分析一下 JavaScript 引擎的作用，為什麼不同的平臺(tái)使用不同的引擎，它們多年來是如何發(fā)展的，以及為什麼我們作為開發(fā)者應(yīng)該關(guān)心。

首先，一些術(shù)語

「JavaScript 引擎」通常被稱為虛擬機(jī)器的一種。 「虛擬機(jī)器」指給定電腦系統(tǒng)的軟體驅(qū)動(dòng)模擬。虛擬機(jī)器有很多類型，它們根據(jù)模擬或替??代實(shí)際實(shí)體機(jī)的精確程度進(jìn)行分類。

例如，「系統(tǒng)虛擬機(jī)器」提供了可以執(zhí)行作業(yè)系統(tǒng)的平臺(tái)的完整模擬。 Mac 使用者可能熟悉 Parallels，這是一個(gè)系統(tǒng)虛擬機(jī)，可讓您在 Mac 上執(zhí)行 Windows。

另一方面，「進(jìn)程虛擬機(jī)器」的功能不太齊全，只能執(zhí)行一個(gè)程式或進(jìn)程。 Wine 是一個(gè)進(jìn)程虛擬機(jī)，可讓您在 Linux 機(jī)器上執(zhí)行 Windows 應(yīng)用程序，但不會(huì)在 Linux 機(jī)器上提供完整的 Windows 作業(yè)系統(tǒng)。

JavaScript 引擎是一種專門用於解釋和執(zhí)行 JavaScript 程式碼的進(jìn)程虛擬機(jī)器。

注意：區(qū)分透過佈局網(wǎng)頁(yè)來驅(qū)動(dòng)瀏覽器的引擎與解釋和執(zhí)行程式碼的低階 JavaScript 引擎非常重要。這篇關(guān)於瀏覽器如何運(yùn)作的文章提供了很好的解釋。

那麼 JavaScript 引擎到底是什麼？它有什麼作用？
總而言之，JavaScript 引擎的基本工作是獲取開發(fā)人員編寫的 JavaScript 程式碼，並將其轉(zhuǎn)換為可以由瀏覽器解釋甚至嵌入到應(yīng)用程式中的快速、優(yōu)化的程式碼。事實(shí)上，JavaScriptCore 稱自己為「優(yōu)化虛擬機(jī)器」。

更準(zhǔn)確地說，每個(gè) JavaScript 引擎都實(shí)作一個(gè) ECMAScript 版本，JavaScript 是其中的一種方言。隨著 ECMAScript 的發(fā)展，JavaScript 引擎也不斷發(fā)展。之所以有這麼多不同的引擎，是因?yàn)槊總€(gè)引擎都設(shè)計(jì)用於不同的 Web 瀏覽器、無頭瀏覽器或 Node.js 等執(zhí)行階段。

您可能熟悉網(wǎng)頁(yè)瀏覽器，但什麼是無頭瀏覽器？它是一個(gè)沒有圖形使用者介面的網(wǎng)頁(yè)瀏覽器。它們對(duì)於針對(duì)您的網(wǎng)路產(chǎn)品執(zhí)行自動(dòng)化測(cè)試非常有用。從 Chrome 版本 59 和 Firefox 版本 56 開始，常規(guī)瀏覽器可以以這種方式使用，特別是用於測(cè)試。 Node.js 在哪裡適合這個(gè)？ Node.js 是一個(gè)非同步、事件驅(qū)動(dòng)的框架，可讓您在伺服器端使用 JavaScript。由於它們是 JavaScript 驅(qū)動(dòng)的工具，因此它們由 JavaScript 引擎支援。

考慮到上面虛擬機(jī)器的定義，將 JavaScript 引擎稱為進(jìn)程虛擬機(jī)器是有意義的，因?yàn)樗奈ㄒ荒康氖亲x取和編譯 JavaScript 程式碼。這並不意味著它是一個(gè)簡(jiǎn)單的引擎。例如，JavaScriptCore 有六個(gè)“構(gòu)建塊”，用於分析、解釋、優(yōu)化和垃圾收集 JavaScript 程式碼。

這是如何運(yùn)作的？

這取決於引擎。讓我們考慮兩個(gè)重要的引擎：WebKit 的 JavaScriptCore 和 Google 的 V8 引擎。這兩個(gè)引擎處理程式碼的方式不同。

JavaScriptCore 執(zhí)行一系列步驟來解釋和最佳化腳本：

它執(zhí)行詞法分析，將原始程式碼分解為一系列標(biāo)記或具有已識(shí)別含義的字串。

然後解析器會(huì)分析標(biāo)記的語法並建構(gòu)到語法樹。

然後啟動(dòng)四個(gè) JIT（即時(shí)）進(jìn)程，分析並執(zhí)行解析器產(chǎn)生的字節(jié)碼。

簡(jiǎn)單來說，這個(gè)JavaScript 引擎取得您的原始程式碼，將其分解為字串（也稱為詞法分析），取得這些字串並將它們轉(zhuǎn)換為編譯器可以理解的字節(jié)碼，然後執(zhí)行它。

Google 的 V8 引擎用 C 語言編寫，也編譯和執(zhí)行 JavaScript 原始碼、處理記憶體分配以及垃圾收集剩餘部分。它的設(shè)計(jì)由一個(gè)編譯器管道組成，可將原始程式碼直接編譯為機(jī)器碼：

• Ignition，產(chǎn)生字節(jié)碼的解釋器

• TurboFan，一種最佳化編譯器，可將位元組碼編譯為機(jī)器碼

• SparkPlug，一個(gè)補(bǔ)充 TurboFan 的編譯器

如果您對(duì)歷史感興趣，這個(gè)新管道取代了 V8 之前使用的較舊的 Full-codegen 和 Crankshaft 雙編譯器設(shè)計(jì)。

編譯過程產(chǎn)生機(jī)器碼後，引擎會(huì)將ECMA 標(biāo)準(zhǔn)中指定的所有資料類型、運(yùn)算子、物件和函數(shù)公開給瀏覽器或任何需要使用它們的執(zhí)行時(shí)間，例如Node.js， Deno 或Electron（由Visual Studio Code 使用）。

一點(diǎn)繞道：運(yùn)行時(shí)

如果 JavaScript 引擎在後臺(tái)悄悄運(yùn)行，解析程式碼並將其分解為可讀字串，以便編譯器可以讀取和編譯它，那麼運(yùn)行時(shí)往往會(huì)吸引更多關(guān)注。這是為什麼？

眾所周知的運(yùn)行時(shí)在 JavaScript 引擎之上工作，擴(kuò)展了它們的功能。最知名的是 Node，但 Deno 和 Bun 是這個(gè)領(lǐng)域的新人。 Node 和 Deno 嵌入了 V8，Bun 嵌入了 JavaScriptCore。

Bun 聲稱比 Node 或 Deno 運(yùn)行得更快，因?yàn)?JavaScriptCore 比 V8 更快，每秒處理 69,845 個(gè) http 請(qǐng)求，而 Node 為 16,288 個(gè)，Deno 為 12,926 個(gè)。

正如Bun 的文檔所述，這些運(yùn)行時(shí)的目標(biāo)是「在瀏覽器之外運(yùn)行世界上大部分JavaScript，為未來的基礎(chǔ)設(shè)施帶來效能和複雜性增強(qiáng)，並透過更好、更簡(jiǎn)單的工具提高開發(fā)人員的生產(chǎn)力。

NativeScript 是專門為使用 JavaScript 建置的跨平臺(tái)本機(jī)行動(dòng)應(yīng)用程式開發(fā)而建置的執(zhí)行時(shí)間的一個(gè)很好的範(fàn)例。

這些運(yùn)行時(shí)也是為了解決 JavaScript 單執(zhí)行緒架構(gòu)帶來的一些固有問題而建構(gòu)的。例如，Node 優(yōu)先考慮例程的非同步、無執(zhí)行緒執(zhí)行。所有這些運(yùn)行時(shí)都提供了精心策劃的開發(fā)人員體驗(yàn)，包括對(duì)深受喜愛的 API（如 fetch、websocket，甚至是 React 開發(fā)人員喜愛的 JSX）的內(nèi)建支援。這可能是它們?nèi)菀孜_發(fā)者註意的原因。

整體而言，執(zhí)行階段解決了標(biāo)準(zhǔn)瀏覽器架構(gòu)及其驅(qū)動(dòng)引擎的效能差距。隨著引擎的發(fā)展，這些運(yùn)行時(shí)肯定也會(huì)發(fā)展。

有哪些 JavaScript 引擎？

有多種 JavaScript 引擎可用於分析、解析和執(zhí)行客戶端程式碼。隨著每個(gè)瀏覽器版本的發(fā)布，JavaScript 引擎可能會(huì)發(fā)生變更或最佳化，以跟上 JavaScript 程式碼執(zhí)行的最新技術(shù)水平。

在被這些引擎的名稱完全混淆之前，請(qǐng)記住，大量的行銷活動(dòng)都投入到了這些引擎及其背後的瀏覽器中，這是很有用的。在這篇對(duì)JavaScript 編譯的有用分析中，作者諷刺地指出：「如果你不知道，編譯器大約37% 是由行銷組成的，而品牌重塑是你可以對(duì)編譯器做的為數(shù)不多的事情之一，從行銷角度來看，因此列車名稱為：SquirrelFish、Nitro、SFX...」

在牢記命名和重命名這些引擎的起起落落的同時(shí)，注意 JavaScript 引擎歷史上的一些重大事件也是很有用的。我為您整理了一個(gè)方便的圖表：

*JavaScriptCore 重寫為 SquirrelFish，更名為 SquirrelFish Extreme，也稱為 Nitro。然而，將 JavaScriptCore 稱為 WebKit 實(shí)作（例如 Safari）底層的 JavaScript 引擎仍然是正確的說法。

**Edge 最初使用 Chakra 引擎，其中部分引擎被微軟開源。然後，Edge 被重建為 Chromium 瀏覽器，底層則有 Blink 和 V8 JavaScript 引擎。

我們?yōu)槭颤N要關(guān)心？

JavaScript 引擎的程式碼解析和執(zhí)行過程的目標(biāo)是在最短的時(shí)間內(nèi)產(chǎn)生最優(yōu)化的程式碼。
最重要的是，這些引擎的發(fā)展與我們對(duì)發(fā)展網(wǎng)路和行動(dòng)環(huán)境以使其盡可能高效能的追求是並行的。要追蹤這一演變，您可以在基準(zhǔn)測(cè)試圖表中查看各種引擎的表現(xiàn)，例如 arewefastyet.com 上產(chǎn)生的圖表。

任何 Web 開發(fā)人員都需要了解瀏覽器中固有的差異，這些瀏覽器顯示我們努力產(chǎn)生、偵錯(cuò)和維護(hù)的程式碼。為什麼某些腳本在一種瀏覽器上運(yùn)行緩慢，但在另一種瀏覽器上運(yùn)行速度更快？

類似地，行動(dòng)開發(fā)人員，尤其是那些使用 webview 來顯示其內(nèi)容編寫混合行動(dòng)應(yīng)用程式的開發(fā)人員，會(huì)想知道哪些引擎正在解釋他們的 JavaScript 程式碼。所有關(guān)心使用者體驗(yàn)的 Web 開發(fā)人員都應(yīng)該了解小型裝置上各種瀏覽器固有的限制和提供的可能性。跟上
的變化 隨著您成為 Web、行動(dòng)或應(yīng)用程式開發(fā)人員，JavaScript 引擎將是值得花時(shí)間的。

本文最初於 2015 年出現(xiàn)在 Telerik 開發(fā)者網(wǎng)路上，此後已針對(duì) 2022 年及以後進(jìn)行了修訂和更新。維基百科的 JavaScript 引擎條目中引用了原始文章。
?

以上是什麼是 JavaScript 引擎？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！