譯—JavaScript是如何工作的（2）：V8引擎內部+優化程式碼的5個技巧

幾周之前，我們開始了一系列旨在深入挖掘JavaScript及其實際工作原理的文章：我們認為通過了解JavaScript的構建塊以及它們如何共同發揮作用，你將能夠編寫更好的程式碼和應用程​​序。                                                                                                                                      

第一篇文章集中於提供引擎，執行時和呼叫堆疊的概述。第二篇文章將深入探討谷歌V8 JavaScript引擎的內部。我們還將提供一些關於如何編寫更好的JavaScript程式碼的小建議—最佳實踐就是我們的團隊構建的SessionStack，在開發時我們就遵循了這些tips。

概述

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

這是一個實現JavaScript引擎的熱門專案列表：

• V8—開源，由谷歌開發，C++編寫
• Rhino—由Mozilla Foundation管理，開源，完全用Java開發
• SpiderMonkey—第一個JavaScript引擎，過去由Netscape Navigator管理，現在由FireFox管理
• JavaScriptCore—開源，作為Nitro銷售，由Apple為Safari開發
• KJS—KDE的引擎最初是由Harri Porten為KDE專案的Konqueror Web瀏覽器開發的
• Chakra(JScript9)—IE瀏覽器
• Chakra(JavaScript)—Microsoft Edge
• Nashorn,作為OpenJDK的一部分開源，由Oracle Java Languages and Tool Group編寫
• JerryScript—是一個物聯網的輕量級引擎。

V8引擎是如何產生的？

由谷歌構建的V8引擎是開源的，用C ++編寫。此引擎在Google Chrome中使用。然而，與其他引擎不同，V8也用於流行的Node.js執行時。

V8最初是被設計來提高JavaScript在web瀏覽器中執行的效能的。為了提高速度，V8將JavaScript程式碼轉換為更高效的機器程式碼，而不是使用直譯器。它通過實現JIT（Just-in-Time） 編譯器在執行時將JavaScript程式碼編譯成機器程式碼來實現的，就像大多數現代JavaScript引擎所做的那樣，比如SpiderMonkey or Rhino (Mozilla)。主要區別是V8不產生位元組碼或任何中間程式碼。

V8曾經有兩個編譯器

• full-codegen— 一個簡單而快速的編譯器，可以生成簡單且相對較慢的機器程式碼。
  
• Crankshaft - 一種更復雜的（即時）優化編譯器，可生成高度優化的程式碼。
  

function(x,y){
    this.x=x;
    this.y=y
}

var p1 = new Point(1,2)複製程式碼

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”以不同的隱藏類結束。在這些情況下，以相同的順序初始化動態屬性要好得多，以便可以重用隱藏的類。

內聯快取（Inline caching）

V8利用另一種技術優化動態型別語言，稱為內聯快取。內聯快取依賴於觀察到對相同型別的物件的重複呼叫傾向於發生在相同型別的物件上。

可以在這裡找到有關內聯快取的深入說明。

我們將討論內聯快取的一些基礎概念（如果你沒有時間瀏覽上面的深入解釋的文章）。

那麼它是怎麼工作的呢？V8維持一個在最近的方法呼叫中作為引數傳遞的物件型別的快取，並使用此資訊來假設將來作為引數傳遞的物件型別。如果V8能夠對將傳遞給方法的物件型別做出很好的假設，它可以繞過弄清楚如何訪問物件屬性的過程，而是使用先前查詢中儲存的資訊到物件的隱藏類。

那麼隱藏類和內聯快取的概念之間有什麼關係呢？每當在特定物件上呼叫方法時，V8引擎必須執行對該物件的隱藏類的查詢，以確定訪問特定屬性的偏移量。在將同一方法兩次成功呼叫到同一個隱藏類之後，V8省略了隱藏類查詢，只是簡單地將屬性的偏移量新增到物件指標本身。對於該方法接下來的呼叫，V8引擎假定隱藏類沒有改變，然後使用先前查詢中儲存的偏移量直接跳轉到特定屬性的記憶體地址。這大大提高了執行速度。

內聯快取也是為什麼相同型別的物件共享隱藏類非常重要的原因。如果你建立兩個相同型別且具有不同隱藏類的物件（如前面示例中所做的那樣），V8無法使用內聯快取，因為即使兩個物件屬於同一型別，其對應的隱藏類也會為其屬性分配不同的偏移量。

                 這兩個物件基本相同，只是“a”和“b”屬性建立的順序不同。

編譯到機器程式碼

氫圖（Hydrogen graph）優化後，Crankshaft將其降低到稱為鋰（Lithium）的低階別表示。大多數Lithium實現都是特定於某種結構的。暫存器的分配（Register allocation）就發生在此級別。

在最後，Lithium被編譯成機器程式碼。然後發生了一些其他的叫做OSR的事情：堆疊替換。在我們開始編譯和優化一個明顯長期執行的方法之前，我們可能正在執行它。V8不會忘記它只是慢慢執行以便再次使用優化版本。相反，它將轉換我們擁有的所有上下文（堆疊，暫存器），以便我們可以在執行過程中切換到優化版本。這是一項非常複雜的任務，請記住，除了其他優化之外，V8最初還內聯了程式碼。 V8並不是唯一能夠做到這一點的引擎。

有一種稱為去優化的保護措施可以進行相反的轉換，並在引擎的假設不再適用的情況下恢復到非優化程式碼。

垃圾收集（Garbage collection）

在垃圾處理這一塊，V8使用傳統的標記和掃描方式來清除垃圾。標記階段應該停止執行JavaScript。為了控制GC成本並使執行更穩定，V8使用增量標記：它只走部分堆後便恢復正常執行，而不是走遍整個堆，試圖示記每個可能的物件。下一次GC將從上一個堆行走停止的位置繼續。這樣可以只在正常執行期間進行短暫的暫停。如前所述，掃描階段由單獨的執行緒處理。

Ignition and TurboFan

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

這個新的執行管道建立在Ignition，V8的直譯器和TurboFan（V8的最新優化編譯器）之上。

你可以在此處檢視V8團隊關於此主題的文章。

自V8版本5.9問世以來，全程式碼生成（ full-codegen）和Crankshaft（自2010年以來為V8服務的技術）不再被V8用於執行JavaScript，因為V8團隊需要跟上JavaScript新的語言功能以及這些功能所需的優化。

這意味著V8總體來說將會擁有更簡單，更易維護的架構。

                                           Web和Node.js基準測試的改進

這些改進只是一個開始。新的Ignition和TurboFan管道為進一步優化鋪平了道路，這些優化將在未來幾年內提升JavaScript效能並縮小V8在Chrome和Node.js中的佔用空間。

最後，這裡有一些關於如何編寫優化良好的JavaScript的提示和技巧。你當然可以從上面的內容輕鬆地推匯出這些內容，但是，這裡有一個方便的總結：

How to write optimized JavaScript

1. 物件屬性的順序：始終以相同的順序例項化您的物件屬性，以便可以共享隱藏的類和隨後優化的程式碼。
   
2. 動態屬性：在例項化之後向物件新增屬性會強制隱藏類改變並減緩為先前隱藏類優化的任何方法。因此，在其建構函式中分配所有物件的屬性。
   
3. 方法：重複執行相同方法的程式碼將比僅執行一次不同方法的程式碼執行得更快（由於內聯快取）。
4. 陣列：避免鍵不是增量數的稀疏陣列。其中沒有每個元素的稀疏陣列是一個雜湊表（hash table）。這種陣列中的元素訪問起來更加昂貴（費時、麻煩）。另外，儘量避免預先分配的大陣列。隨著需要增長其長度更好。最後，不要刪除陣列中的元素。這會使鍵變得稀疏。
5. 標記值（Tagged values）：V8的物件和數字都用32位來表示。它使用一個位來知道它是一個物件（flag = 1）還是一個稱為SMI（SMall Integer）的31位的整數（flag = 0）。然後，如果數值大於31位，V8會將數字打包，將其變為雙精度並建立一個新物件以將數字放入其中。嘗試儘可能使用31位帶符號的數字，以避免對JS物件進行昂貴的裝箱操作。