要混淆JavaScipt與瀏覽器

語言和環(huán)境是兩個不同的概念。提及JavaScript,大多數(shù)人可能會想到瀏覽器，脫離瀏覽器JavaScipt是不可能運行的，這與其他系統(tǒng)級的語言有著很大的不同。例如C語言可以開發(fā)系統(tǒng)和制造環(huán)境，而JavaScript只能寄生在某個具體的環(huán)境中才能夠工作。

JavaScipt運行環(huán)境一般都有宿主環(huán)境和執(zhí)行期環(huán)境。如下圖所示：

宿主環(huán)境是由外殼程序生成的，比如瀏覽器就是一個外殼環(huán)境（但是瀏覽器并不是唯一，很多服務(wù)器、桌面應(yīng)用系統(tǒng)都能也能夠提供JavaScript引擎運行的環(huán)境）。執(zhí)行期環(huán)境則有嵌入到外殼程序中的JavaScript引擎（比如V8引擎，稍后會詳細(xì)介紹）生成，在這個執(zhí)行期環(huán)境，首先需要創(chuàng)建一個代碼解析的初始環(huán)境，初始化的內(nèi)容包含：

1. 一套與宿主環(huán)境相關(guān)聯(lián)系的規(guī)則
2. JavaScript引擎內(nèi)核（基本語法規(guī)則、邏輯、命令和算法）
3. 一組內(nèi)置對象和API
4. 其他約定

雖然，不同的JavaScript引擎定義初始化環(huán)境是不同的，這就形成了所謂的瀏覽器兼容性問題，因為不同的瀏覽器使用不同JavaScipt引擎。不過最近的這條消息想必大家都知道——瀏覽器市場，微軟居然放棄了自家的EDGE(IE的繼任者)，轉(zhuǎn)而投靠競爭對手Google主導(dǎo)的Chromium核心(國產(chǎn)瀏覽器百度、搜狗、騰訊、獵豹、UC、傲游、360用的都是Chromium（Chromium用的是鼎鼎大名的V8引擎，想必大家都十分清楚吧），可以認(rèn)為全是Chromium的馬甲)，真是大快人心，我們終于在同一環(huán)境下愉快的編寫代碼了，想想真是開心！

重溫編譯原理

一提起JavaScript語言，大部分的人都將其歸類為“動態(tài)”或“解釋執(zhí)行”語言，其實他是一門“編譯性”語言。與傳統(tǒng)的編譯語言不同，它不是提前編譯的，編譯結(jié)果也不能在分布式系統(tǒng)中進(jìn)行移植。在介紹JavaScript編譯器原理之前，小編和大家一起重溫下基本的編譯器原理，因為這是最基礎(chǔ)的，了解清楚了我們更能了解JavaScript編譯器。

編譯程序一般步驟分為：詞法分析、語法分析、語義檢查、代碼優(yōu)化和生成字節(jié)碼。具體的編譯流程如下圖：

分詞/詞法分析（Tokenizing/Lexing）

所謂的分詞，就好比我們將一句話，按照詞語的最小單位進(jìn)行分割。計算機(jī)在編譯一段代碼前，也會將一串串代碼拆解成有意義的代碼塊，這些代碼塊被稱為詞法單元（token）。例如，考慮程序var a=2。這段程序通常會被分解成為下面這些詞法單元：var、a、=、2、；空格是否作為當(dāng)為詞法單位，取決于空格在這門語言中是否具有意義。

解析/語法分析(Parsing)

這個過程是將詞法單元流轉(zhuǎn)換成一個由元素逐級嵌套所組成的代表了程序語法結(jié)構(gòu)的樹。這個樹稱為“抽象語法樹”（Abstract Syntax Tree,AST）。

詞法分析和語法分析不是完全獨立的，而是交錯進(jìn)行的，也就是說，詞法分析器不會在讀取所有的詞法記號后再使用語法分析器來處理。在通常情況下，每取得一個詞法記號，就將其送入語法分析器進(jìn)行分析。

語法分析的過程就是把詞法分析所產(chǎn)生的記號生成語法樹，通俗地說，就是把從程序中收集的信息存儲到數(shù)據(jù)結(jié)構(gòu)中。注意，在編譯中用到的數(shù)據(jù)結(jié)構(gòu)有兩種：符號表和語法樹。

符號表：就是在程序中用來存儲所有符號的一個表，包括所有的字符串變量、直接量字符串，以及函數(shù)和類。

語法樹：就是程序結(jié)構(gòu)的一個樹形表示，用來生成中間代碼。下面是一個簡單的條件結(jié)構(gòu)和輸出信息代碼段，被語法分析器轉(zhuǎn)換為語法樹之后，如以下代碼：

if (typeof a=="undefined") {
 a=0;
} else {
 a=a;
}
alert(a);

如果JavaScript解釋器在構(gòu)造語法樹的時候發(fā)現(xiàn)無法構(gòu)造，就會報語法錯誤，并結(jié)束整個代碼塊的解析。對于傳統(tǒng)強類型語言來說，在通過語法分析構(gòu)造出語法樹后，翻譯出來的句子可能還會有模糊不清的地方，需要進(jìn)一步的語義檢查。語義檢查的主要部分是類型檢查。例如，函數(shù)的實參和形參類型是否匹配。但是，對于弱類型語言來說，就沒有這一步。

經(jīng)過編譯階段的準(zhǔn)備， JavaScript代碼在內(nèi)存中已經(jīng)被構(gòu)建為語法樹，然后 JavaScript引擎就會根據(jù)這個語法樹結(jié)構(gòu)邊解釋邊執(zhí)行。

代碼生成

將AST轉(zhuǎn)換成可執(zhí)行代碼的過程被稱為代碼生成。這個過程與語言、目標(biāo)平臺相關(guān)。

了解完編譯原理后，其實JavaScript引擎要復(fù)雜的許多，因為大部分情況，JavaScript的編譯過程不是發(fā)生在構(gòu)建之前，而是發(fā)生在代碼執(zhí)行前的幾微妙，甚至?xí)r間更短。為了保證性能最佳，JavaScipt使用了各種辦法，稍后小編將會詳細(xì)介紹。

神秘的編譯器——V8引擎

由于JavaScipt大多數(shù)都是運行在瀏覽器上，不同瀏覽器的使用的引擎也各不相同，以下是目前主流瀏覽器引擎:

由于谷歌的V8編譯器的出現(xiàn)，由于性能良好吸引了相當(dāng)?shù)淖⒛浚接捎赩8的出現(xiàn)，我們目前的前端才能大放光彩，百花齊放，V8引擎用C++進(jìn)行編寫， 作為一個 JavaScript 引擎，最初是服役于 Google Chrome 瀏覽器的。它隨著 Chrome 的第一版發(fā)布而發(fā)布以及開源。現(xiàn)在它除了 Chrome 瀏覽器，已經(jīng)有很多其他的使用者了。諸如 NodeJS、MongoDB、CouchDB 等。最近最讓人振奮前端新聞莫過于微軟居然放棄了自家的EDGE(IE的繼任者)，轉(zhuǎn)而投靠競爭對手Google主導(dǎo)的Chromium核心(國產(chǎn)瀏覽器百度、搜狗、騰訊、獵豹、UC、傲游、360用的都是Chromium（Chromium用的是鼎鼎大名的V8引擎，想必大家都十分清楚吧），看來V8引擎在不久的將來就會一統(tǒng)江湖，下面小編將重點介紹V8引擎。

當(dāng)V8編譯JavaScript 代碼時，解析器(parser)將生成一個抽象語法樹(上一小節(jié)已介紹過)。語法樹是JavaScript代碼的句法結(jié)構(gòu)的樹形表示形式。解釋器 Ignition 根據(jù)語法樹生成字節(jié)碼。TurboFan 是V8的優(yōu)化編譯器，TurboFan將字節(jié)碼(Bytecode)生成優(yōu)化的機(jī)器代碼(Machine Code)。

V8曾經(jīng)有兩個編譯器

在5.9版本之前，該引擎曾經(jīng)使用了兩個編譯器：

full-codegen - 一個簡單而快速的編譯器，可以生成簡單且相對較慢的機(jī)器代碼。

Crankshaft - 一種更復(fù)雜的（即時）優(yōu)化編譯器，可生成高度優(yōu)化的代碼。

V8引擎還在內(nèi)部使用多個線程：

• 主線程：獲取代碼，編譯代碼然后執(zhí)行它
• 優(yōu)化線程：與主線程并行，用于優(yōu)化代碼的生成
• Profiler線程:它將告訴運行時我們花費大量時間的方法，以便Crankshaft可以優(yōu)化它們
• 其他一些線程來處理垃圾收集器掃描

字節(jié)碼

字節(jié)碼是機(jī)器代碼的抽象。如果字節(jié)碼采用和物理 CPU 相同的計算模型進(jìn)行設(shè)計，則將字節(jié)碼編譯為機(jī)器代碼更容易。這就是為什么解釋器（interpreter）常常是寄存器或堆棧。Ignition 是具有累加器的寄存器。

您可以將V8的字節(jié)碼看作是小型的構(gòu)建塊（bytecodes as small building blocks），這些構(gòu)建塊組合在一起構(gòu)成任何 JavaScript 功能。V8 有數(shù)以百計的字節(jié)碼。比如 Add 或 TypeOf 這樣的操作符，或者像 LdaNamedProperty 這樣的屬性加載符，還有很多類似的字節(jié)碼。V8還有一些非常特殊的字節(jié)碼，如 CreateObjectLiteral 或 SuspendGenerator。頭文件bytecodes.h（https://github.com/v8/v8/blob/master/src/interpreter/bytecodes.h） 定義了 V8 字節(jié)碼的完整列表。

在早期的V8引擎里，在多數(shù)瀏覽器都是基于字節(jié)碼的，V8引擎偏偏跳過這一步，直接將jS編譯成機(jī)器碼，之所以這么做，就是節(jié)省了時間提高效率，但是后來發(fā)現(xiàn)，太占用內(nèi)存了。最終又退回字節(jié)碼了，之所以這么做的動機(jī)是什么呢？

• 減輕機(jī)器碼占用的內(nèi)存空間，即犧牲時間換空間（主要動機(jī)）
• 提高代碼的啟動速度 對 v8 的代碼進(jìn)行重構(gòu)，
• 降低 v8 的代碼復(fù)雜度

每個字節(jié)碼指定其輸入和輸出作為寄存器操作數(shù)。Ignition 使用寄存器 r0，r1，r2，... 和累加器寄存器（accumulator register）。幾乎所有的字節(jié)碼都使用累加器寄存器。它像一個常規(guī)寄存器，除了字節(jié)碼沒有指定。例如，Add r1 將寄存器 r1 中的值和累加器中的值進(jìn)行加法運算。這使得字節(jié)碼更短，節(jié)省內(nèi)存。

許多字節(jié)碼以 Lda 或 Sta 開頭。Lda 和 Stastands 中的 a 為累加器（accumulator）。例如，LdaSmi [42] 將小整數(shù)（Smi）42 加載到累加器寄存器中。Star r0 將當(dāng)前在累加器中的值存儲在寄存器 r0 中。

以現(xiàn)在掌握的基礎(chǔ)知識，花點時間來看一個具有實際功能的字節(jié)碼。

function incrementX(obj) {
 return 1 + obj.x;
}
incrementX({x: 42}); // V8 的編譯器是惰性的，如果一個函數(shù)沒有運行，V8 將不會解釋它

如果要查看 V8 的 JavaScript 字節(jié)碼，可以使用在命令行參數(shù)中添加 --print-bytecode運行 D8 或Node.js（8.3 或更高版本）來打印。對于 Chrome，請從命令行啟動 Chrome，使用 --js-flags="--print-bytecode"，請參考 Run Chromium with flags。

$ node --print-bytecode incrementX.js
... [generating bytecode for function: incrementX] Parameter count 2 Frame size 8
 12 E> 0x2ddf8802cf6e @ StackCheck
 19 S> 0x2ddf8802cf6f @ LdaSmi [1]
 0x2ddf8802cf71 @ Star r0
 34 E> 0x2ddf8802cf73 @ LdaNamedProperty a0, [0], [4]
 28 E> 0x2ddf8802cf77 @ Add r0, [6]
 36 S> 0x2ddf8802cf7a @ Return
Constant pool (size=1) 0x2ddf8802cf21: [FixedArray] in OldSpace
- map=0x2ddfb2d02309 <Map(HOLEY_ELEMENTS)>
- length: 1 0: 0x2ddf8db91611 <String[1]: x>
Handler Table (size=16)

我們忽略大部分輸出，專注于實際的字節(jié)碼。接下來我們來一起分析相關(guān)的關(guān)鍵字節(jié)碼：

LdaSmi [1]

LdaSmi [1] 將常量 1 加載到累加器中。

Star r0

接下來，Star r0 將當(dāng)前在累加器中的值 1 存儲在寄存器 r0 中。

LdaNamedProperty a0, [0], [4]

LdaNamedProperty 將 a0 的命名屬性加載到累加器中。ai 指向 incrementX() 的第 i 個參數(shù)。在這個例子中，我們在 a0 上查找一個命名屬性，這是 incrementX() 的第一個參數(shù)。該屬性名由常量 0 確定。LdaNamedProperty 使用 0 在單獨的表中查找名稱：

- length: 1
 0: 0x2ddf8db91611 <String[1]: x>

可以看到，0 映射到了 x。因此這行字節(jié)碼的意思是加載 obj.x。

那么值為 4 的操作數(shù)是干什么的呢？它是函數(shù) incrementX() 的反饋向量的索引。反饋向量包含用于性能優(yōu)化的 runtime 信息。

現(xiàn)在寄存器看起來是這樣的：

Add r0, [6]

最后一條指令將 r0 加到累加器，結(jié)果是 43。6 是反饋向量的另一個索引。

Return 返回累加器中的值。返回語句是函數(shù) incrementX() 的結(jié)束。此時 incrementX() 的調(diào)用者可以在累加器中獲得值 43，并可以進(jìn)一步處理此值。

V8引擎為啥這么快？

由于JavaScript弱語言的特性（一個變量可以賦值不同的數(shù)據(jù)類型），同時很彈性，允許我們在任何時候在對象上新增或是刪除屬性和方法等， JavaScript語言非常動態(tài)，我們可以想象會大大增加編譯引擎的難度，盡管十分困難，但卻難不倒V8引擎，v8引擎運用了好幾項技術(shù)達(dá)到加速的目的：

內(nèi)聯(lián)（Inlining）：

內(nèi)聯(lián)特性是一切優(yōu)化的基礎(chǔ)，對于良好的性能至關(guān)重要，所謂的內(nèi)聯(lián)就是如果某一個函數(shù)內(nèi)部調(diào)用其它的函數(shù)，編譯器直接會將函數(shù)中的執(zhí)行內(nèi)容，替換函數(shù)方法。如下圖所示：

如何理解呢？看如下代碼：

function add(a, b) {
 return a + b;
}
function calculateTwoPlusFive() {
 var sum;
 for (var i=0; i <=1000000000; i++) {
 sum=add(2 + 5);
 }
}
var start=new Date();
calculateTwoPlusFive();
var end=new Date();
var timeTaken=end.valueOf() - start.valueOf();
console.log("Took " + timeTaken + "ms");

由于內(nèi)聯(lián)屬性特性，在編譯前，代碼將會被優(yōu)化成：

function add(a, b) {
 return a + b;
}
function calculateTwoPlusFive() {
 var sum;
 for (var i=0; i <=1000000000; i++) {
 sum=2 + 5;
 }
}
var start=new Date();
calculateTwoPlusFive();
var end=new Date();
var timeTaken=end.valueOf() - start.valueOf();
console.log("Took " + timeTaken + "ms");

如果沒有內(nèi)聯(lián)屬性的特性，你能想象運行的有多慢嗎？把第一段JS代碼嵌入HTML文件里，我們用不同的瀏覽器打開（硬件環(huán)境：i7,16G內(nèi)存,mac系統(tǒng)），用safari打開如下圖所示，17秒：

如果用Chrome打開，還不到1秒，快了16秒！

隱藏類（Hidden class）：

例如C++/Java這種靜態(tài)類型語言的每一個變量，都有一個唯一確定的類型。因為有類型信息，一個對象包含哪些成員和這些成員在對象中的偏移量等信息，編譯階段就可確定，執(zhí)行時CPU只需要用對象首地址 —— 在C++中是this指針，加上成員在對象內(nèi)部的偏移量即可訪問內(nèi)部成員。這些訪問指令在編譯階段就生成了。

但對于JavaScript這種動態(tài)語言，變量在運行時可以隨時由不同類型的對象賦值，并且對象本身可以隨時添加刪除成員。訪問對象屬性需要的信息完全由運行時決定。為了實現(xiàn)按照索引的方式訪問成員，V8“悄悄地”給運行中的對象分了類，在這個過程中產(chǎn)生了一種V8內(nèi)部的數(shù)據(jù)結(jié)構(gòu)，即隱藏類。隱藏類本身是一個對象。

考慮以下代碼：

function Point(x, y) {
 this.x=x;
 this.y=y;
}
var p1=new Point(1, 2);

如果new Point(1, 2)被調(diào)用，v8引擎就會創(chuàng)建一個引隱藏的類C0，如下圖所示：

由于Point沒有定于任何屬性，因此“C0”為空

一旦“this.x=x”被執(zhí)行，v8引擎就會創(chuàng)建一個名為“C1”的第二個隱藏類。基于“c0”,“c1”描述了可以找到屬性X的內(nèi)存中的位置（相當(dāng)指針）。在這種情況下，隱藏類則會從C0切換到C1,如下圖所示：

每次向?qū)ο筇砑有碌膶傩詴r，舊的隱藏類會通過路徑轉(zhuǎn)換切換到新的隱藏類。由于轉(zhuǎn)換的重要性，因為引擎允許以相同的方式創(chuàng)建對象來共享隱藏類。如果兩個對象共享一個隱藏類的話，并且向兩個對象添加相同的屬性，轉(zhuǎn)換過程中將確保這兩個對象使用相同的隱藏類和附帶所有的代碼優(yōu)化。

當(dāng)執(zhí)行this.y=y，將會創(chuàng)建一個C2的隱藏類，則隱藏類更改為C2。

隱藏類的轉(zhuǎn)換的性能，取決于屬性添加的順序，如果添加順序的不同，效果則不同，如以下代碼：

function Point(x, y) {
 this.x=x;
 this.y=y;
}
var p1=new Point(1, 2);
p1.a=5;
p1.b=6;
var p2=new Point(3, 4);
p2.b=7;
p2.a=8;

你可能以為P1、p2使用相同的隱藏類和轉(zhuǎn)換，其實不然。對于P1對象而言，隱藏類先a再b,對于p2而言，隱藏類則先b后a，最終會產(chǎn)生不同的隱藏類，增加編譯的運算開銷，這種情況下，應(yīng)該以相同的順序動態(tài)的修改對象屬性，以便可以復(fù)用隱藏類。

內(nèi)聯(lián)緩存（Inline caching）

正常訪問對象屬性的過程是：首先獲取隱藏類的地址，然后根據(jù)屬性名查找偏移值，然后計算該屬性的地址。雖然相比以往在整個執(zhí)行環(huán)境中查找減小了很大的工作量，但依然比較耗時。能不能將之前查詢的結(jié)果緩存起來，供再次訪問呢？當(dāng)然是可行的，這就是內(nèi)嵌緩存。

內(nèi)嵌緩存的大致思路就是將初次查找的隱藏類和偏移值保存起來，當(dāng)下次查找的時候，先比較當(dāng)前對象是否是之前的隱藏類，如果是的話，直接使用之前的緩存結(jié)果，減少再次查找表的時間。當(dāng)然，如果一個對象有多個屬性，那么緩存失誤的概率就會提高，因為某個屬性的類型變化之后，對象的隱藏類也會變化，就與之前的緩存不一致，需要重新使用以前的方式查找哈希表。

內(nèi)存管理

內(nèi)存的管理組要由分配和回收兩個部分構(gòu)成。V8的內(nèi)存劃分如下：

• Zone：管理小塊內(nèi)存。其先自己申請一塊內(nèi)存，然后管理和分配一些小內(nèi)存，當(dāng)一塊小內(nèi)存被分配之后，不能被Zone回收，只能一次性回收Zone分配的所有小內(nèi)存。當(dāng)一個過程需要很多內(nèi)存，Zone將需要分配大量的內(nèi)存，卻又不能及時回收，會導(dǎo)致內(nèi)存不足情況。
• 堆：管理JavaScript使用的數(shù)據(jù)、生成的代碼、哈希表等。為方便實現(xiàn)垃圾回收，堆被分為三個部分：

1. 年輕分代：為新創(chuàng)建的對象分配內(nèi)存空間，經(jīng)常需要進(jìn)行垃圾回收。為方便年輕分代中的內(nèi)容回收，可再將年輕分代分為兩半，一半用來分配，另一半在回收時負(fù)責(zé)將之前還需要保留的對象復(fù)制過來。
2. 年老分代：根據(jù)需要將年老的對象、指針、代碼等數(shù)據(jù)保存起來，較少地進(jìn)行垃圾回收。
3. 大對象：為那些需要使用較多內(nèi)存對象分配內(nèi)存，當(dāng)然同樣可能包含數(shù)據(jù)和代碼等分配的內(nèi)存，一個頁面只分配一個對象。

垃圾回收

V8 使用了分代和大數(shù)據(jù)的內(nèi)存分配，在回收內(nèi)存時使用精簡整理的算法標(biāo)記未引用的對象，然后消除沒有標(biāo)記的對象，最后整理和壓縮那些還未保存的對象，即可完成垃圾回收。為了控制 GC 成本并使執(zhí)行更加穩(wěn)定, V8 使用增量標(biāo)記, 而不是遍歷整個堆, 它試圖標(biāo)記每個可能的對象, 它只遍歷一部分堆, 然后恢復(fù)正常的代碼執(zhí)行. 下一次 GC 將繼續(xù)從之前的遍歷停止的位置開始. 這允許在正常執(zhí)行期間非常短的暫停. 如前所述, 掃描階段由單獨的線程處理.

優(yōu)化回退

V8 為了進(jìn)一步提升JavaScript代碼的執(zhí)行效率，編譯器生直接生成更高效的機(jī)器碼。程序在運行時，V8會采集JavaScript代碼運行數(shù)據(jù)。當(dāng)V8發(fā)現(xiàn)某函數(shù)執(zhí)行頻繁(內(nèi)聯(lián)函數(shù)機(jī)制)，就將其標(biāo)記為熱點函數(shù)。針對熱點函數(shù)，V8的策略較為樂觀，傾向于認(rèn)為此函數(shù)比較穩(wěn)定，類型已經(jīng)確定，于是編譯器，生成更高效的機(jī)器碼。后面的運行中，萬一遇到類型變化，V8采取將JavaScript函數(shù)回退到優(yōu)化前的編譯成機(jī)器字節(jié)碼。如以下代碼：

function add(a, b) {
 return a + b
}
for (var i=0; i < 10000; ++i) {
 add(i, i);
}
add('a', 'b');//千萬別這么做！

再來看下面的一個例子：

// 片段 1
var person={
 add: function (a, b) {
 return a + b;
 }
 };
obj.name='li';
// 片段 2
var person={
 add: function (a, b) {
 return a + b;
 },
 name: 'li'
 };

以上代碼實現(xiàn)的功能相同，都是定義了一個對象，這個對象具有一個屬性name和一個方法add()。但使用片段2的方式效率更高。片段1給對象obj添加了一個屬性name，這會造成隱藏類的派生。給對象動態(tài)地添加和刪除屬性都會派生新的隱藏類。假如對象的add函數(shù)已經(jīng)被優(yōu)化，生成了更高效的代碼，則因為添加或刪除屬性，這個改變后的對象無法使用優(yōu)化后的代碼。

從例子中我們可以看出：

函數(shù)內(nèi)部的參數(shù)類型越確定，V8越能夠生成優(yōu)化后的代碼。