Day07:V8 bytecode 系列文總結


在這七天裡面,我們看了許多小範例,從小範例當中慢慢去學習怎麼閱讀 bytecode。我自己寫了這七篇之後,看 bytecode 的速度快滿多的,大概掃一下就可以知道在做什麼。最大的主因是因為「結構」,例如說看到判斷接 jump 就是 if else,看到 jump loop 就是迴圈等等,而且常用的指令其實就那幾個,看習慣之後速度會變滿快的。

不過在這邊我要先修正一個用詞。

前面文章中若是有提到「V8」,其實更精確的說法是:「V8 中的 Ignition」,例如說「V8 中沒有對這個做優化」,其實我想講的是:「V8 中的 Ignition 沒有對這個做優化」。用詞精確我覺得還滿重要的,避免誤導讀者。

會希望特別提到這個是因為 V8 裡面除了 Ignition 會把 JavaScript source code 變成 byte code 以外,也會把 byte code 還有 Ignition 蒐集到的資訊(就是 feedback vector 啦)傳給 TurboFan,最後再產生出 machine code。

所以事實上,有許多優化都是在 TurboFan 做的而非 Ignition。因此我猜測 Ignition 應該只有做一點點很基本的優化,其他的都要透過 TurboFan 所產生的 machine code 去觀察。

雖然說想要認真研究這一塊的話,還是需要去理解 machine code,透過 bytecode 能理解的東西有限,例如說 this 的值是什麼,就沒辦法透過 bytecode 來觀察到,也沒辦法觀察到更多優化的細節。但是對於一些簡單的情況,bytecode 依然有其優點,可以觀察到一段程式碼被「拆解開來」的樣子,例如說之前 Day06 提到的那些經典案例。

最後,若是讀者想要繼續研究這一塊,底下是我搜集的一些 V8 的相關參考資料:

2016 年 6 月 23 日:BlinkOn 6 Day 1 Talk 2: Ignition - an interpreter for V8

簡單介紹一下 V8 的執行流程以及為什麼需要 Ignition。

2017 年 6 月 21 日:V8 and How It Listens to You - Michael Stanton

深入講解 inline cache 跟 feedback vector。

2017 年 11 月 14 日:Benedikt Meurer: A Tale of TurboFan: Four years that changed V8 forever

講了 TurboFan 做的優化,像是 inline function、Speculative Optimization 還有 Escape analysis 等等。

2018 年 5 月 7 日:JavaScript Engine Internals for JavaScript Developers - talk

用陣列來當作範例,講了滿多優化相關的東西,主要聚焦在陣列的 hole。

2018 年 6 月 12 日:Sigurd Scheider: Inside V8: The choreography of Ignition and TurboFan | Web Rebels 2018

把 optimization 以及 deoptimization 講得很清楚,以及什麼是 type feedback
還講了針對 Array method 的優化,演講完以後有搭配一篇延伸文章,更深入講解優化:An Introduction to Speculative Optimization in V8

2018 年 6 月 15 日:JavaScript Engines: The Good Parts™ - Mathias Bynens & Benedikt Meurer - JSConf EU 2018

稍微講了一下各家 JS 引擎的架構,重點解釋了 object 跟 array 在引擎眼中的樣子(Shape,以前在 V8 部落格看過這個概念但沒有很理解),有搭配的文章:JavaScript engine fundamentals: Shapes and Inline Caches

結語

感謝大家的耐心閱讀,希望透過這個系列文可以推廣 bytecode,讓大家在對於 JavaScript 產生疑惑時,可以有個想法是:「那不如去看看 bytecode」好了。雖然說平常可能很少機會用到,但若是真的要用的時候,也不會害怕去看 bytecode。

#javascript







你可能感興趣的文章

[極短篇] SQL injection

[極短篇] SQL injection

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段四:個人專案~重構)

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段四:個人專案~重構)

計算 CSS Selector 的權重

計算 CSS Selector 的權重






留言討論