有時編寫 Web 應用的代碼會感覺充滿魔力，因為我們只是寫了一系列字符，就能在瀏覽器里看到效果了。但是理解魔法背后的技術，可以幫助你更好地提高編程技巧。至少當你試 圖解釋在 JavaScript 驅(qū)動的 web 或移動應用的幕后發(fā)生了什么的時候，會覺得自己不那么白癡了。

很多年前，那是我還是個研究生講師，向一個教授抱怨還沒有掌握那些特別難懂的法語語法點，可以教給我的本科學生。我記得當時她說的話：“有時候，學習某個事物的唯一方式就是教授它。”

嘗試向工程師解釋 NativeScript 是如何通過 JavaScript 引擎在幕后工作、 在運行時連接調(diào)用原生的 APIs——面對這樣一件復雜的工作很容易在一片雜草中迷失方向。事實上，任何 JavaScript 開發(fā)者都應該對我們每天使用的這門技術基礎的引擎感到好奇?，F(xiàn)在我們一起來仔細分析下 JavaScript 引擎到底做了什么，為什么不同的平臺使用不同引擎，多年來它們是如何發(fā)展的，以及作為開發(fā)者我們?yōu)槭裁匆P注這些。

首先，一些專業(yè)術語

“JavaScript 引擎”通常被稱作一種 虛擬機。“虛擬機”是指軟件驅(qū)動的給定的計算機系統(tǒng)的模擬器。有很多類型的虛擬機，它們根據(jù)自己在多大程度上精確地模擬或代替真實的物理機器來分類。

例如，“系統(tǒng)虛擬機”提供了一個可以運行操作系統(tǒng)的完整仿真平臺。Mac 用戶很熟悉的 Parallels 就是一個允許你在 Mac 上運行 Windows系統(tǒng)虛擬機。

另一方面，“進程虛擬機”不具備全部的功能，能運行一個程序或者進程。Wine 是一個允許你在 Linux 機器上運行 Windows 應用的進程虛擬機，但是并不在 Linux 中提供完整的 Windows 操作系統(tǒng)。

JavaScript 虛擬機是一種進程虛擬機，專門設計來解釋和執(zhí)行的 JavaScript 代碼。

注意：要區(qū)別在瀏覽器中排布頁面布局的 布局引擎 和解釋和執(zhí)行代碼的底層 JavaScript 引擎是非常重要的。在 這里 可以找到一個很好的闡釋。

那么，確切來講，到底什么是 JavaScript 引擎，它做了什么？

JavaScript 引擎的基本工作是把開發(fā)人員寫的 JavaScript 代碼轉(zhuǎn)換成高效、優(yōu)化的代碼，這樣就可以通過瀏覽器進行解釋甚至嵌入到應用中。事實上，JavaScriptCore 自稱為“優(yōu)化虛擬機”。

更準確地講，每個 JavaScript 引擎都實現(xiàn)了一個版本的 ECMAScript，JavaScript 是它的一個分支。隨著 ECMAScript 的不斷發(fā)展，JavaScript 引擎也不斷改進。之所以有這么多不同的引擎，是因為它們每個都被設計運行在不同的 web 瀏覽器、headless 瀏覽器、或者像 Node.js 那樣的運行時環(huán)境中。

你也許熟悉 web 瀏覽器，那什么是 headless 瀏覽器呢？它是一個沒有圖形用戶界面的 web 瀏覽器。它們在對 web 產(chǎn)品進行自動化測試時十分有用。一個很棒的例子就是 PhantomJS。那 Node.js 又和 JavaScript 引擎有什么關系？Node.js 是一個異步的、事件驅(qū)動的框架，讓你在服務器端可以使用 JavaScript。既然他們是驅(qū)動 JavaScript 的工具，所以它們也是由 JavaScript 引擎驅(qū)動。

按照上述關于虛擬機的定義，把 JavaScript 引擎稱作進程虛擬機就很好理解了，因為它的唯一的目的就是讀取和編譯 JavaScript 代碼。這并不意味著它只是個簡單的引擎。比如，JavaScriptCore 就有六個“構(gòu)建模塊”可以分析、解釋、優(yōu)化、垃圾回收 JavaScript 代碼。

它是如何工作的？

當然，這決定于引擎。吸引我們注意的兩個主要的引擎都利用了 NativeScript ，它們分別是 WebKit 的 JavaScriptCore 和 Google 的 V8 引擎。這兩個引擎使用不同的方式處理代碼。

JavaScriptCore 執(zhí)行 一系列步驟 來解釋和優(yōu)化腳本：

1. 它進行詞法分析，就是將源代碼分解成一系列具有明確含義的符號或字符串。

2. 然后用語法分析器分析這些符號，將其構(gòu)建成語法樹。

3. 接著四個 JIT（Just-In-Time）進程開始參與進來，分析和執(zhí)行解析器所生成的字節(jié)碼。

什么？簡單來說，JavaScript 引擎會加載你的源代碼，把它分解成字符串（又叫做分詞），再 把這些字符串轉(zhuǎn)換 成編譯器可以理解的字節(jié)碼，然后執(zhí)行這些字節(jié)碼。

Google 的 V8 引擎 是用 C++ 編寫的，它也能夠編譯并執(zhí)行 JavaScript 源代碼、處理內(nèi)存分配和垃圾回收。它被設計成由兩個編譯器組成，可以把源碼直接編譯成機器碼：

1. Full-codegen：輸出未優(yōu)化代碼的快速編譯器

2. Crankshaft: 輸出執(zhí)行效率高、優(yōu)化過的代碼的慢速編譯器

如果 Crankshaft 確定需要優(yōu)化的代碼是由 Full-codegen 生成的未優(yōu)化代碼，它就會取代 Full-codegen，這個過程叫做“crankshafting”。

一旦編譯過程中產(chǎn)生了機器代碼，引擎就會向瀏覽器暴露所有的數(shù)據(jù)類型、操作符、對象、在 ECMA 標準中指定的函數(shù)、或任何運行時需要使用的東西，NativeScript 就是如此。

有哪些 JavaScript 引擎？

有一大堆令人眼花繚亂的 JavaScript 引擎可以用來解釋、分析和執(zhí)行你的客戶端代碼。每個瀏覽器版本發(fā)布時，它的 JavaScript 引擎都可能有所改變或優(yōu)化以跟上 JavaScript 代碼執(zhí)行技術的狀況的變化。

你還沒被這些瀏覽器引擎的名字完全弄糊涂之前，請記住很多市場營銷的元素被加入了這些引擎和以它們?yōu)榛A的瀏覽器。這篇對 JavaScript 編譯 十分有用的分析 中，作者諷刺地指出：“你所不知道的是，編譯器大約有 37% 是由市場營銷構(gòu)成的，對編譯器進行品牌重塑也是你能做的為數(shù)不多的事情之一，智慧的市場營銷，故而有了一系列名字：SquirrelFish、Nitro、SFX……”。

在牢記營銷對命名和重命名這些引擎的影響的同時，注意到幾件在 JavaScript 引擎發(fā)展史上的重大事件是很有用的。我為你做了一個便于理解的圖表：

*JavaScriptCore 被改寫為 SquirrelFish，升級版本為 QuirrelFish Extreme，也叫做 Nitro。然而，構(gòu)成 Webkit 實現(xiàn)基礎的 JavaScript 引擎就是 JavaScriptCore（比如 Safari）。

**iOS 開發(fā)者應該要知道移動設備的 Safari 使用 Nitro，但是 UIWebView 不包括 JIT 編譯，所以體驗會慢一些。然而開發(fā)人員可以在 iOS8 中使用包含 Nitro 的 WKWebView，使用體驗 明顯 變快?；旌弦苿討贸绦虻拈_發(fā)人員應該能松口氣了。

*最終 io.js 從 Node.js 分離開的原因之一就是為了支持 V8 版本的引擎。這仍然是一個挑戰(zhàn)，正如 這里 講述的。

我們?yōu)槭裁匆P注？

JavaScript 引擎的代碼解析和執(zhí)行過程的目標就是在最短時間內(nèi)編譯出***化的代碼。

最重要的是，這些引擎的演進與我們對發(fā)展 web 和 移動平臺的不斷探究息息相關，讓它們盡可能具有高性能，是相輔相成的。為了追蹤這種演進，你可以看到各種各樣的引擎在基準圖中是如何表現(xiàn)的，就好像 arewefastyet.com 總結(jié)的。例如，比較 Chrome 在搭載 V8 引擎與 non-Crankshafted 引擎時的表現(xiàn)就很有趣。

任何一個 web 開發(fā)者都要意識到，我們努力編寫、調(diào)試和維護的代碼在不同瀏覽器中執(zhí)行效果必然有所差異。為什么某段代碼在一個瀏覽器上工作得很慢，但在另一個上卻快得多？

同樣地，移動開發(fā)者，尤其是使用 webview 顯示頁面內(nèi)容的混合移動應用開發(fā)者，或者那些使用像 NativeScript 這種運行時環(huán)境的開發(fā)者，想知道是什么引擎在解釋執(zhí)行他們的 JavaScript 代碼。移動 web 開發(fā)者應該注意到那些小小設備上的瀏覽器所具備的各種局限性和可能性。作為一個想持續(xù)發(fā)展的 web、移動或應用程序開發(fā)人員，時刻關注 JavaScript 引擎的變化會帶給你超值回報。