面向前端開發者的V8性能優化

內容來源：2017年6月24日，在線回聲公司前端技術專家迷渡在「騰訊Web前端大會 TFC 2017 」進行《面向前端開發者的V8性能優化》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。
閱讀字數：2683 | 4分鐘閱讀

摘要

V8是一個由丹麥Google使用C++開發的開源JavaScript引擎，用於Google Chrome中，目前該JavaScript引擎已用於其它項目的開發。

嘉賓演講視頻地址：t.cn/RC0fGOl

PPT地址：t.cn/RpjFdlm

在V8中的數字表示

在V8中數字有小整數（SMI）和引用類型，它們是經過標記位進行表示的，以提高性能。

例如把整數42編碼爲0×0000002a00000000；指針0×12345678編碼爲0×12345679，非整數數值存放在堆裏。

這個例子是爲了說明基於標記位的存儲方式，在 V8 引擎的內部並非這麼存儲的。

在V8代碼中使用C++的位運算去作比較，是爲了提高V8引擎自己的性能。

如圖我作了一個基準測試。左邊的代碼是V8單元測試中的代碼，可見在32位中使用的是i30，在64位系統上，V8則會使用i31。

性能測試是基於64位進行的，經過性能測試會發現，前面的速度都很是快，到了i31再往上加的時候，速度就成倍的降低。

這套代碼是js的另外一段單元測試，測試的是js的代碼。當咱們不知道一個API如何使用或不知道一個東西內部是怎樣的時候，去看它的單元測試，就很容易知道它外部表現出來的是什麼樣，咱們該如何去用。

在V8的class裏，它們都繼承了一個Value。Value分爲Object和Primitive。Primitive下面是number，在number下面又會分紅Int32和Uint32。

Object下面的分類不少，好比數組函數，這些基本上都是Object類型。

Javascript中的「加法」

分析完數據類型，再來看看它的運算。在運算中常常會遇到一些問題，例如：

爲何++[[]][+[]]+[+[]]=10？

{}+{}等於多少？

爲何[1,2]+[3,4]不等於[1,2,3,4]？

在js的加法運算中，它有本身類型轉換的規則。js是一種弱類型，若是用不一樣類型去作加法，它會直接編譯器報錯。弱類型不是由於它沒有類型，只是它不像靜態語言那樣進行強制性轉換，而是有默認的規則進行轉換。

V8的算數運算

V8算數運算的快速模式就是直接調用二進制代碼assembly，包括小整數、堆區的數值，還有一些怪異的類型undefined、null、true、false，以及字符串。

對象運算使用C++實現比較慢。

快速模式

編譯一段代碼a + b，先把a放到一個寄存器，再把b放到一個寄存器，而後調一個函數，這個函數能夠將a和b相加，相加結果會放到內存裏。這是常規的編譯方法。

要讓編譯的速度變快，進行優化編譯。把a和b放入寄存器，直接調用CPU指令add，而後將兩個寄存器相加，結果放進eax。但假如a和b是字符串，就不能直接進行優化編譯。

Type feedback

V8引入了類型反饋技術。當咱們進行二元運算的時候，V8會對全部運算的參數進行類型反饋，類型反饋給V8引擎。

這就是V8使用的優化編輯器。使用類型反饋作動態檢查，通常而言會在編譯階段提早檢查。檢查以後，使用該類型做爲動態類型。若是檢查失敗，去優化（deopt）。去優化以後，可能會使用解釋器運行中間碼。

去優化Deoptimization

去優化就是生成一個未優化的幀，運算時，V8會把優化的幀去掉，調用的時候V8再從新進行優化。

當去優化並再次優化完成以後，最終會生成從新優化過的機器碼。若是要進行別的操做，V8還會進行優化操做。

要避免「去優化」

去優化的消耗大，主要是由於從新優化的消耗很是大。

若是咱們不恰當的使用類型反饋信息，那麼咱們就會陷入去優化的怪圈：函數不停地去優化，而後再從新優化，直到咱們達到了重優化的次數限制，這時咱們的函數將不再會被V8引擎優化。

Can we do better?

如今在不少庫裏，它們直接使用位運算和asm.js。

在位運算中，只對低32位有效。這是一個很是重要的類型反饋信息。

截斷

在( x + y )｜0運算時，咱們只關心低32位的結果。即便x,y都是int52，咱們也只關心x和y的低32位。

表達式+a[i] 不區分a[i]=undefined和a[i]=NaN。在稀疏數組中，咱們會讀取到NaN!而不是undefined。

表達式c ? x : y也不須要區分c=1和c=true。

「截斷」的其它用途

截斷還能夠用於其餘優化：

從double到integer轉換時的負零檢查；

乘法運算的負零檢查；

讀取數組元素時的undefined檢查；

使引擎能更精準地表示類型。

截斷傳播只在V8的Turbofan編譯器有效。

面臨的挑戰

目前，引擎首先進行截斷分析，而類型反饋不影響截斷。

例如，( x + y｜0 )中x和y將會被做爲整型。理想狀況下，使用x和y的類型反饋，而後進行int32加法。然而，不少狀況下，最明智的選擇每每是「更差」的表示法。好比a + b + 0.5應該是float64，即便a,b被反饋爲整型。

將來方向

JavaScript可使用任意的精確的整數。咱們能夠更加精準的控制V8引擎生成的代碼，也許之後會有(U)Int64或BigNum類型。

在將來的方向上有TypedArray、WebAssembly和SIMD三種。

TypedArray目前已經有了並被不少引擎和瀏覽器實現。

WebAssembly：咱們能夠用C++寫js代碼，寫完直接生成抽象語法樹，讓V8進行進一步編譯。

SIMD充分發揮了CPU的優點，單指令多運算並行。

V8 Binding：JS Object和DOM對象 

如上圖，右邊是DOM樹。div下面有一個段落，段落有兩個子元素。右邊與之對應的，div會生成一個div的js object，p會生成p object。

TurboFan

TurboFan是V8即將使用的新引擎。

TurboFan IR是一個內部表示。當咱們寫了一串代碼，V8引擎對代碼進行內部表示，最終纔會進行優化操做，翻譯成咱們所須要的代碼。TurboFan全部的表示、優化都是基於圖。

V8速度快的緣由就是內部使用了Hidden Classes，能直接把代碼編譯成機器碼，性能很是高。

整數相加

首先咱們建立一個add，傳了一個對象，依靠對象的兩個屬性（實際上是一個屬性）進行相加。一個屬性表示它的類型相同。而後進行循環、相加。

咱們用d8分析它的性能，若是沒有 d8 咱們可使用 ndoe.js 代替。圖上第一行進行了優化，而且寫了緣由small function。由於函數很是小，V8對它進行了內聯操做。

混合相加

混合相加和整數相加的區別就是在於，咱們生成0-1的隨機數，用0.5進行判斷。

最後幾行顯示，原本想優化，最後發現不能優化，由於沒有足夠的類型信息。

圖中最長的一行代碼通過優化後，下面的代碼又不能優化了，要想繼續優化還要等待類型信息。

--trace-depot

V8內部進行了去優化。

full gc

上面的代碼不變，下面的代碼在數組裏放了一個很大的對象，有5%的機率將這個對象釋放。

--allowe-natives-syntax

當咱們在調試js性能或寫一些性能要求很高的庫的時候，會常用到這個語法。它容許咱們在js代碼裏使用C++函數。

這是代碼生效後的結果。

Bluebird promise

Bluebird是用在promise的一個庫，這是我常用的一個庫。在不少場景下它比原生的用得還要高，由於它能加快object的訪問速度。

累加

咱們進行一個累加的遞歸。好比sum操做，若是是1返回1，不是1則返回當前數和以前數的累加。

下圖是它的調用過程。

調用棧

每次調用函數要開闢一個棧，當再調用的時候，從這個函數裏又開闢出了一個新的棧而後返回。最後返回咱們的值。

若是咱們使用的是尾調用（函數的最末尾調用了另外一個函數），其實咱們不用開闢新的棧，只須要使用同一個棧去作全部的操做都行。由於即便開闢了新棧，當前棧也再也不使用了。這對內存的保護有很大的優化做用。

如圖可見，優化後中間有一個棧的調用丟失了。

如今的解決方式就是咱們能夠進行顯式指定，有三個待選的語法return continue、!return、#function()。

我今天的分享就到這裏，感謝聆聽！

推薦文章

• XpmJS —— 小程序後端開發思考和實踐
  

• 百度外賣如何作到前端開發配置化

近期活動

直播 | 2017 數據技術嘉年華 - 成都站

• 內含贈票福利 | 你可能正在錯過一場下半年最火的互聯網大會