JavaScript是如何工做的：深刻V8引擎&編寫優化代碼的5個技巧

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

本系列的 第一篇文章 主要介紹引擎、運行時和調用堆棧。第二篇文章將深刻谷歌 V8 的JavaScript引擎的內部。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

概述

JavaScript引擎是執行 JavaScript 代碼的程序或解釋器。JavaScript引擎能夠實現爲標準解釋器，或者以某種形式將JavaScript編譯爲字節碼的即時編譯器。

覺得實現JavaScript引擎的流行項目的列表：

• V8 — 開源，由 Google 開發，用 C ++ 編寫
• Rhino — 由 Mozilla 基金會管理，開源，徹底用 Java 開發
• SpiderMonkey — 是第一個支持 Netscape Navigator 的 JavaScript 引擎，目前正供 Firefox 使用
• JavaScriptCore — 開源，以Nitro形式銷售，由蘋果爲Safari開發
• KJS — KDE 的引擎，最初由 Harri Porten 爲 KDE 項目中的 Konqueror 網頁瀏覽器開發
• Chakra (JScript9) — Internet Explorer
• Chakra (JavaScript) — Microsoft Edge
• Nashorn, 做爲 OpenJDK 的一部分，由 Oracle Java 語言和工具組編寫
• JerryScript —  物聯網的輕量級引擎

爲何要建立V8引擎?

由谷歌構建的V8引擎是開源的，使用c++編寫。這個引擎是在谷歌Chrome中使用的，可是，與其餘引擎不一樣的是 V8 也用於流行的 node.js。

V8最初被設計用來提升web瀏覽器中JavaScript執行的性能。爲了得到速度，V8 將 JavaScript 代碼轉換成更高效的機器碼，而不是使用解釋器。它經過實現 JIT (Just-In-Time) 編譯器將 JavaScript 代碼編譯爲執行時的機器碼，就像許多現代 JavaScript 引擎(如SpiderMonkey或Rhino (Mozilla)) 所作的那樣。這裏的主要區別是 V8 不生成字節碼或任何中間代碼。

V8 曾有兩個編譯器

在 V8 的 5.9 版本出來以前，V8 引擎使用了兩個編譯器：

• full-codegen — 一個簡單和很是快的編譯器，產生簡單和相對較慢的機器碼。
• Crankshaft — 一種更復雜（Just-In-Time）的優化編譯器，生成高度優化的代碼。

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

• 主線程執行你所指望的操做：獲取代碼、編譯代碼並執行它
• 還有一個單獨的線程用於編譯，所以主線程能夠在前者優化代碼的同時繼續執行
• 一個 Profiler 線程，它會告訴運行時咱們花了不少時間，讓 Crankshaft 能夠優化它們
• 一些線程處理垃圾收集器

當第一次執行 JavaScript 代碼時，V8 利用 full-codegen 編譯器，直接將解析的 JavaScript 翻譯成機器代碼而不進行任何轉換。這使得它能夠很是快速地開始執行機器代碼。請注意，V8 不使用中間字節碼，從而不須要解釋器。

當代碼已經運行一段時間後，分析線程已經收集了足夠的數據來判斷應該優化哪一個方法。

接下來，Crankshaft  從另外一個線程開始優化。它將 JavaScript 抽象語法樹轉換爲被稱爲 Hydrogen 的高級靜態單分配（SSA）表示，並嘗試優化 Hydrogen 圖，大多數優化都是在這個級別完成的。

內聯代碼

第一個優化是提早內聯儘量多的代碼。內聯是用被調用函數的主體替換調用點（調用函數的代碼行）的過程。這個簡單的步驟容許下面的優化更有意義。

隱藏類

JavaScript是一種基於原型的語言：沒有使用克隆過程建立類和對象。JavaScript也是一種動態編程語言，這意味着能夠在實例化後輕鬆地在對象中添加或刪除屬性。

大多數 JavaScript 解釋器使用相似字典的結構（基於哈希函數）來存儲對象屬性值在內存中的位置，這種結構使得在 JavaScript 中檢索屬性的值比在 Java 或 C＃ 等非動態編程語言中的計算成本更高。

在Java中，全部對象屬性都是在編譯以前由固定對象佈局肯定的，而且沒法在運行時動態添加或刪除（固然，C＃具備動態類型，這是另外一個主題）。

所以，屬性值（或指向這些屬性的指針）能夠做爲連續緩衝區存儲在存儲器中，每一個緩衝區之間具備固定偏移量， 能夠根據屬性類型輕鬆肯定偏移的長度，而在運行時能夠更改屬性類型的 JavaScript 中這是不可能的。

因爲使用字典查找內存中對象屬性的位置效率很是低，所以 V8 使用了不一樣的方法：隱藏類。隱藏類與 Java 等語言中使用的固定對象（類）的工做方式相似，只是它們是在運行時建立的。如今，讓咱們看看他們實際的例子：

一旦 「new Point（1，2）」 調用發生，V8 將建立一個名爲 「C0」 的隱藏類。

還沒有爲 Point 定義屬性，所以「C0」爲空。

一旦第一個語句「this.x = x」被執行（在「Point」函數內），V8 將建立一個名爲 「C1」 的第二個隱藏類，它基於「C0」。 「C1」描述了能夠找到屬性 x 的存儲器中的位置（相對於對象指針）。

在這種狀況下，「x」存儲在偏移0處，這意味着當將存儲器中的 point 對象視爲連續緩衝區時，第一偏移將對應於屬性 「x」。 V8 還將使用 「類轉換」 更新 「C0」 ，該類轉換指出若是將屬性 「x」 添加到 point 對象，則隱藏類應從 「C0」 切換到 「C1」。 下面的 point 對象的隱藏類如今是「C1」。

每次將新屬性添加到對象時，舊的隱藏類都會更新爲指向新隱藏類的轉換路徑。隱藏類轉換很是重要，由於它們容許在以相同方式建立的對象之間共享隱藏類。若是兩個對象共享一個隱藏類而且同一屬性被添加到它們中，則轉換將確保兩個對象都接收相同的新隱藏類以及隨其附帶的全部優化代碼。

當語句 「this.y = y」 被執行時，會重複一樣的過程（在 「Point」 函數內部，「this.x = x」語句以後）。

一個名爲「C2」的新隱藏類會被建立，若是將一個屬性 「y」 添加到一個 Point 對象（已經包含屬性「x」），一個類轉換會添加到「C1」，則隱藏類應該更改成「C2」，point 對象的隱藏類更新爲「C2」。

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

如今，假設對於p1和p2，將使用相同的隱藏類和轉換。那麼，對於「p1」，首先添加屬性「a」，而後添加屬性「b」。然而，「p2」首先分配「b」，而後是「a」。所以，因爲不一樣的轉換路徑，「p1」和「p2」以不一樣的隱藏類別結束。在這種狀況下，以相同的順序初始化動態屬性好得多，以便隱藏的類能夠被重用。

內聯緩存

V8利用了另外一種優化動態類型語言的技術，稱爲內聯緩存。內聯緩存依賴於這樣一種觀察，即對同一方法的重複調用每每發生在同一類型的對象上。這裏能夠找到對內聯緩存的深刻解釋。

接下來將討論內聯緩存的通常概念（若是您沒有時間經過上面的深刻了解）。

那麼它是如何工做的呢? V8 維護了在最近的方法調用中做爲參數傳遞的對象類型的緩存，並使用這些信息預測未來做爲參數傳遞的對象類型。若是 V8 可以很好地預測傳遞給方法的對象的類型，它就能夠繞過如何訪問對象屬性的過程，而是使用從之前的查找到對象的隱藏類的存儲信息。

那麼隱藏類和內聯緩存的概念如何相關呢？不管什麼時候在特定對象上調用方法時，V8 引擎都必須執行對該對象的隱藏類的查找，以肯定訪問特定屬性的偏移量。在同一個隱藏類的兩次成功的調用以後，V8 省略了隱藏類的查找，並簡單地將該屬性的偏移量添加到對象指針自己。對於該方法的全部下一次調用，V8 引擎都假定隱藏的類沒有更改，並使用從之前的查找存儲的偏移量直接跳轉到特定屬性的內存地址。這大大提升了執行速度。

內聯緩存也是爲何相同類型的對象共享隱藏類很是重要的緣由。 若是你建立兩個相同類型和不一樣隱藏類的對象（正如咱們以前的例子中所作的那樣），V8將沒法使用內聯緩存，由於即便這兩個對象屬於同一類型，它們對應的隱藏類爲其屬性分配不一樣的偏移量。

這兩個對象基本相同，可是「a」和「b」屬性的建立順序不一樣。

編譯成機器碼

一旦 Hydrogen 圖被優化，Crankshaft 將其下降到稱爲 Lithium 的較低級表示。大部分的 Lithium 實現都是特定於架構的。寄存器分配每每發生在這個級別。

最後，Lithium 被編譯成機器碼。而後就是 OSR ：on-stack replacement（堆棧替換）。在咱們開始編譯和優化一個明確的長期運行的方法以前，咱們可能會運行堆棧替換。 V8 不僅是緩慢執行堆棧替換，並再次開始優化。相反，它會轉換咱們擁有的全部上下文（堆棧，寄存器），以便在執行過程當中切換到優化版本上。這是一個很是複雜的任務，考慮到除了其餘優化以外，V8 最初還將代碼內聯。 V8 不是惟一可以作到的引擎。

有一種叫去優化的安全措施來進行相反的轉換，並在假設引擎無效的狀況下返回未優化的代碼。

垃圾收集

對於垃圾收集，V8採用傳統的 mark-and-sweep 算法 來清理舊一代。 標記階段應該中止JavaScript執行。 爲了控制GC成本並使執行更穩定，V8使用增量標記：不是遍歷整個堆，嘗試標記每一個可能的對象，它只是遍歷堆的一部分，而後恢復正常執行。下一個GC中止將從上一個堆行走中止的位置繼續，這容許在正常執行期間很是短暫的暫停，如前所述，掃描階段由單獨的線程處理。

如何編寫優化的 JavaScript

1. 對象屬性的順序：始終以相同的順序實例化對象屬性，以即可以共享隱藏的類和隨後優化的代碼。
2. 動態屬性： 由於在實例化以後向對象添加屬性將強制執行隱藏的類更改，並下降以前隱藏類所優化的全部方法的執行速度，因此在其構造函數中分配全部對象的屬性。
3. 方法：重複執行相同方法的代碼將比僅執行一次的多個不一樣方法（因爲內聯緩存）的代碼運行得更快。
4. 數組：避免稀疏數組，其中鍵值不是自增的數字，並無存儲全部元素的稀疏數組是哈希表。這種數組中的元素訪問開銷較高。另外，儘可能避免預分配大數組。最好是按需增加。最後，不要刪除數組中的元素，這會使鍵值變得稀疏。
5. 標記值：V8 使用 32 位表示對象和數值。因爲數值是 31 位的，它使用了一位來區分它是一個對象（flag = 1）仍是一個稱爲 SMI（SMall Integer）整數（flag = 0）。那麼，若是一個數值大於 31 位，V8會將該數字裝箱，把它變成一個雙精度數，並建立一個新的對象來存放該數字。儘量使用 31 位有符號數字，以免對 JS 對象的高開銷的裝箱操做。

Ignition and TurboFan

隨着2017年早些時候發佈V8 5.9，引入了新的執行管道。 這個新的管道在實際的JavaScript應用程序中實現了更大的性能提高和顯着節省內存。

新的執行流程是創建在 Ignition（ V8 的解釋器）和 TurboFan（ V8 的最新優化編譯器）之上的。

自從 V8 5.9 版本問世以來，因爲 V8 團隊一直努力跟上新的 JavaScript 語言特性以及這些特性所須要的優化，V8 團隊已經再也不使用 full-codegen 和 Crankshaft（自 2010 年以來爲 V8 技術所服務）。

這意味着 V8 總體上將有更簡單和更易維護的架構。

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

原文：https://blog.sessionstack.com...

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。