JavaScript工作機制：V8 引擎內部機制及如何編寫最佳化代碼的5個訣竅

標籤：程式   成本   屬性   固定   分代   主題   this   執行個體化   大數   

概述

JavaScript引擎是一個執行JavaScript代碼的程式或解譯器。JavaScript引擎可以被實現為標準解譯器，或者實現為以某種形式將JavaScript編譯為位元組碼的即時編譯器。

下面是實現了JavaScript引擎的一個熱門項目列表：

• V8 — 開源，由Google開發，用C++編寫的
• Rhin o — 由Mozilla基金所管理，開源，完全用Java開發
• SpiderMonkey —第一個JavaScript引擎，最早用在Netscape Navigator上，現在用在Firefox上。
• JavaScriptCore — 開源，以Nitro銷售，由蘋果公司為Safari開發
• KJS —KDE的引擎最初由Harri Porten開發，用於KDE項目的Konqueror瀏覽器
• Chakra (JScript9) — Internet Explorer
• Chakra (JavaScript) — Microsoft Edge
• Nashorn — 開源為OpenJDK的一部分，由Oracle的Java語言和工具組開發
• JerryScript — 是用於物聯網的輕量級引擎

建立V8引擎的由來

Google構建的V8引擎是開源的，用C++編寫的。該引擎被用在Google Chrome中。不過，與其他引擎不同的是，V8還被用作很受歡迎的Node.js的運行時。

V8最初是設計用來提升Web瀏覽器中JavaScript執行的效能。為了獲得速度，V8將JavaScript代碼轉換為更高效的機器碼，而不是使用解譯器。它通過實現像很多現代JavaScript引擎（比如SpiderMonkey或Rhino）所用的JIT（即時）編譯器，從而將JavaScript代碼編譯成機器碼。這裡主要區別在於V8不會產生位元組碼或任何中間代碼。

V8曾經有兩個編譯器

在V8 的5.9版（今年早些時候發布）出現之前，V8引擎用了兩個編譯器：

• full-codegen – 一個簡單而超快的編譯器，可以產生簡單而相對較慢的機器碼。
• Crankshaft – 一個更複雜（即時）的最佳化的編譯器，可以產生高度最佳化的代碼。

V8引擎還在內部使用多個線程：

• 主線程執行我們想讓它乾的活：擷取代碼，編譯然後執行它
• 還有一個單獨的線程用於編譯，這樣在主線程繼續執行的同時，單獨的線程能同時在最佳化代碼
• 一個Profiler線程，用於讓運行時知道哪些方法花了大量時間，這樣Crankshaft就可以對它們進行最佳化
• 幾個線程用於處理垃圾收集器清掃

第一次執行JavaScript代碼時，V8會利用 full-codegen 直接將解析的JavaScript翻譯為機器碼，而無需任何轉換。這就讓它能非常快地開始執行機器碼。請注意，由於V8不會使用中間位元組碼錶示，這樣就無需解譯器。

代碼運行了一段時間後，Profiler線程已經收集了足夠的資料來判斷應該最佳化哪個方法。

接下來， Crankshaft最佳化 從另一個線程中開始。它將JavaScript抽象文法樹翻譯為稱為Hydrogen 的進階靜態單賦值（SSA）表示，並嘗試最佳化Hydrogen圖。大多數最佳化都是在這一級完成的。

內聯

第一個最佳化是提前內聯儘可能多的代碼。內聯是用被調用的函數的函數體替換調用位置（調用函數所在的程式碼）的過程。這個簡單的步驟讓以下最佳化變得更有意義。

隱藏類

JavaScript是一種基於原型的語言：它沒有類，對象是用一種複製過程建立的。JavaScript也是一種動態程式設計語言，就是說在對象執行個體化之後，可以隨意給對象添加或刪除屬性。

大多數JavaScript解譯器都使用類似字典的結構（基於雜湊函數），將對象屬性值的位置儲存在記憶體中。這種結構使得在JavaScript中擷取屬性的值比在Java或C#這樣的非動態程式設計語言中更昂貴。在Java中，所有對象屬性都是由編譯前的固定物件版面配置確定的，並且不能在運行時動態添加或刪除（C#有動態類型，這是另一個話題了）。因此，屬性的值（或指向這些屬性的指標）可以在記憶體中存為連續緩衝區，每個緩衝區之間有固定位移量。位移量的長度可以很容易根據屬性類型來確定。而在JavaScript中，這是不可能的，因為屬性類型可能會在運行期間發生變化。

由於用字典來尋找記憶體中對象屬性的位置是非常低效的，所以V8使用了不同的方法來替代：隱藏類。隱藏類的工作機制類似於像Java這樣的語言中使用的固定物件版面配置（類），只不過隱藏類是在運行時建立的。下面，我們來看看它們到底是什麼樣子：

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

一旦 new Point(1, 2) 調用發生了，V8就會建立一個稱為 C0 的隱藏類。

因為還沒有給 Point 定義屬性，所以 C0 為空白。

一旦執行了第一條語句 this.x = x （在 Point 函數中），V8就會建立一個基於 C0 的第二個隱藏類 C1 。 C1 描述了記憶體中的位置（相對於對象指標），屬性 x 在這個位置可以找到。此時， x 儲存在位移地址0處，就是說，當將記憶體中的 point 對象作為連續緩衝器來查看時，第一個位移地址就對應於屬性 x 。V8也會用“類轉換”來更新 C0 ，指出如果將一個屬性 x 添加到點對象，那麼隱藏類應該從 C0 切換到 C1 。下面的 point 對象的隱藏類現在是 C1 。

每當向對象添加一個新屬性時，舊的隱藏類就被用一個轉換路徑更新為新的隱藏類。隱藏類轉換很重要，因為它們可以讓隱藏類在以相同方式建立的對象之間共用。如果兩個對象共用一個隱藏類，並且將相同的屬性添加到這兩個對象中，那麼轉換會確保兩個對象都接收到相同的新隱藏類和它附帶的所有最佳化過的代碼。

當執行語句 this.y = y （同樣是在 Point 函數內部， this.x = x 語句之後）時，會重複此過程。

這時，又建立一個名為 C2 的新隱藏類，類轉換被添加到 C1 ，表示如果將屬性 y 添加到 Point 對象（已包含屬性 x ），那麼隱藏類應更改為 C2 ，同時 point 對象的隱藏類被更新為 C2 。

隱藏類轉換取決於將屬性添加到對象的順序。看下面的程式碼片段：

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 會使用相同的隱藏類和轉換。嗯，這是錯的。對於 p1 ，首先是添加屬性 a ，然後是屬性 b 。不過，對於 p2 ，先是給 b 賦值，然後才是 a 。因此，由於轉換路徑不同， p1 和 p2 最終會有不同的隱藏類。在這種情況下，以相同的順序初始化動態屬性要更好，這樣隱藏類才可以被重用。

內聯緩衝

V8利用另一種稱為內聯緩衝（inline caching）的技術來最佳化動態類型語言。內聯緩衝來自於觀察的結果：對同一方法的重複調用往往發生在同一類型的對象上。關於內聯緩衝的深入解釋可以在 這裡 找到。

下面我們打算談談內聯緩衝的一般概念（如果您沒有時間閱讀上面的深入解釋的話）。

那麼它是如何工作的呢？V8維護在最近的方法調用中作為參數傳遞的物件類型的緩衝，並使用該資訊對將來作為參數傳遞的物件類型做出假設。如果V8能夠對傳遞給方法的物件類型做出一個很好的假設，那麼它可以繞過算出如何訪問對象的屬性的過程，轉而使用先前尋找對象的隱藏類時所儲存的資訊。

那麼隱藏類和內聯緩衝的概念是如何關聯的呢？無論何時在特定對象上調用方法，V8引擎必須對該對象的隱藏類執行尋找，以確定訪問特定屬性的位移地址。在對同一個隱藏類的同一方法進行了兩次成功的調用之後，V8就省掉了隱藏類尋找，只將屬性的位移地址添加到對象指標本身上。對於所有將來對該方法的調用，V8引擎都會假定隱藏類沒有改變，並使用先前尋找中儲存的位移地址直接跳轉到特定屬性的記憶體位址。這會大大提高執行速度。

內聯緩衝也是為什麼同一類型的對象共用隱藏類非常重要的原因。如果您建立相同類型的兩個對象，但是用的是不同的隱藏類（如前面的樣本），那麼V8將無法使用內聯緩衝，因為即使兩個對象的類型相同，但是它們的對應隱藏類也會為其屬性分配不同的位移地址。

兩個對象基本相同，但是“a”和“b”屬性是按照不同的順序建立的。

編譯到機器碼

一旦Hydrogen圖被最佳化，Crankshaft將其降低到一個稱為Lithium的較低層級表示。大多數Lithium實現都是針對架構的。寄存器分配發生在這一級。

最後，Lithium被編譯成機器碼。然後其他事情，也就是OSR（當前棧替換，on-stack replacement），發生了。在我們開始編譯和最佳化一個明顯要長期啟動並執行方法之前，我們可能會運行它。V8不會蠢到忘記它剛剛慢慢執行的代碼，所以它不會再用最佳化版本又執行一遍，而是將轉換所有已有的上下文（棧、寄存器），以便我們可以在執行過程中間就切換到最佳化版本。這是一個非常複雜的任務，請記住，除了其他最佳化之外，V8最開始時已經內聯了代碼。V8並非唯一能夠做到這一點的引擎。

有一種稱為去最佳化的保護措施，會作出相反的轉換，並恢複為非最佳化代碼，以防引擎的假設不再成立。

記憶體回收

對於記憶體回收來說，V8採用的是標記、清掃這種傳統分代方式來清除舊一代。標記階段應該停止執行JavaScript。為了控制GC成本，並使執行更加穩定，V8使用增量式標記：不是遍曆整個堆，嘗試標記每一個可能的對象，而是只遍曆一部分堆，然後恢複正常執行。下一個GC停止會從之前的堆遍曆停止的地方繼續。這就允許在正常執行期間有非常短的暫停。如前所述，清掃階段是由單獨的線程處理。

Ignition 和 TurboFan

隨著2017年早些時候版本5.9的發布，V8引入了一個新的執行管道。這個新的管道在真實的JavaScript應用程式中實現了更大的效能提升和顯著的記憶體節省。

這個新的執行管道建立在V8的解譯器 Ignition 和V8的最新最佳化編譯器 TurboFan 之上。

您可以在 這裡 查看V8團隊關於這個主題的博文。

自從5.9版本發布以來，V8不再用full-codeget 和 Crankshaft（自2010年以來V8所用的技術）執行JavaScript，因為V8團隊一直在努力跟上新的JavaScript語言特性，而這些特性需要最佳化。

這意味著V8整體下一步會有更簡單和更易維護的架構。

在Web和Node.js基準測試上的提升

這些提升僅僅是開始。新的Ignition和TurboFan管道為進一步最佳化鋪平了道路，這將在未來幾年內促進JavaScript效能提升，並縮小V8在Chrome和Node.js中所佔比重。

最後，這裡有一些關於如何編寫良好最佳化、更佳的JavaScript的訣竅。當然，從上面的內容不難得到這些訣竅，不過，為了方便起見，這裡還是給出一個摘要：

如何編寫最佳化的JavaScript

1. 對象屬性的順序 ：始終以相同的順序執行個體化對象屬性，以便可以共用隱藏類和隨後最佳化的代碼。
2. 動態屬性 ：在執行個體化後向對象添加屬性會強制修改隱藏類，減慢為之前的隱藏類最佳化了的方法。所以應該在建構函式中指定對象的所有屬性。
3. 方法 ：重複執行相同方法的代碼將比只執行一次的代碼（由於內聯緩衝）運行得快。
4. 數組 ：避免鍵不是增量數位稀疏數組。元素不全的稀疏數組是一個 雜湊表， 而訪問這種數組中的元素更昂貴。另外，盡量避免預分配大數組。最好隨著發展而增長。最後，不要刪除數組中的元素。它會讓鍵變得稀疏。
5. 標記值 ：V8用32位表示對象和數字。它用一位來判斷是對象（flag = 1）還是整數（flag=0）（這個整數稱為SMI（SMall Integer，小整數），因為它是31位）。然後，如果一個數值大於31位，V8將會對數字裝箱，將其轉化為 double，並建立一個新對象將該數字放在裡面。所以要儘可能使用31位有符號數字，從而避免昂貴的轉換為JS對象的裝箱操作。

我們在SessionStack中試圖在編寫高度最佳化的JavaScript代碼中遵循這些最佳實務。原因是一旦將SessionStack整合到產品web應用程式中，它就開始記錄所有內容：所有DOM更改、使用者互動、JavaScript異常、棧跟蹤、失敗的網路請求和調試訊息。用SessionStack，您可以將Web應用中的問題重放為視頻，並查看使用者發生的一切。而所有這些都是在對您的web應用程式的效能不會產生影響的情況下發生的。

JavaScript工作機制：V8 引擎內部機制及如何編寫最佳化代碼的5個訣竅