【JSConf EU 2018】JavaScript引擎: 精粹部分

JSConf EU 2018圓滿結束, 谷歌V8的開發者Mathias Bynens以及Benedikt Meurer一塊兒發表了《JavaScript Engines: The Good Parts™》演講，本文將帶領你們回顧一下演講上所提到的重點。

演講第一部分: JavaScript引擎

JavaScript引擎

JavaScript引擎解析源代碼並將其轉換成抽象語法樹（AST）。基於AST，解釋器產生字節碼。此時，引擎正在運行JavaScript代碼。爲了加快運行速度，字節碼連同分析數據一塊兒發送到編譯器。編譯器根據已有的分析數據作出某些假設，而後生成優化後機器代碼。

JavaScript引擎中的解釋器/編譯器

經過對比主流JavaScript引擎之間的一些實現差別來講明JavaScript引擎是如何運行你的代碼。

解釋器快速生成未優化的字節碼，編譯器會花費更長的時間，但最終產生高度優化的機器代碼。

以上基本就是V8在Chrome和Node.js中的工做流程

V8的解釋器負責生成和執行字節碼。當它運行字節碼時，它收集分析數據，這些數據是優化的依據。當函數運行時，生成的字節碼和分析數據被傳遞給TurboFan編譯器，基於分析數據生成高度優化的機器代碼。

SpiderMonkey是Mozilla的JavaScript引擎，在Firefox和SpiderNode中使用，它和咱們上面所講的流程有點不一樣。它有兩個編譯器。Baseline編譯器生成一些優化的代碼。結合在運行代碼時收集的分析數據，IonMonkey編譯器能夠產生重度優化的代碼。若是優化失敗，IonMonkey 回退到Baseline的優化代碼。

Chakra，微軟的JavaScript引擎，用於Edge和Node-ChakraCore，有很是相似的兩個優化編譯器。解釋器生成的字節碼先經過SimuleJIT生成優化代碼，這裏的JIT表明即時編譯器。結合分析數據，FuljJIT能夠產生更加的優化代碼。

JavaScriptCore（簡稱 JSC），蘋果的JavaScript引擎，用於Safari和React Native，它包含三種不一樣的編譯器。LLInt解釋器生成字節碼，能夠通過Baseline編譯器生成優化的代碼。還能夠經過DFG編譯器進行進一步優化，最後還能夠交給FTL編譯器進行優化。

解釋器能夠快速生成字節碼，但字節碼一般執行效率不高。另外一方面，編譯器須要更長的時間，但最終會產生更高效的機器代碼。快速獲取代碼以運行（解釋器）或佔用更多時間，但最終以最佳性能運行代碼（編譯器）之間存在權衡。

演講第二部分：JavaScript的對象模型

ECMAScript規範基本上將全部對象定義爲字典，並將字符串鍵映射到描述對象。

JavaScript對於數組的定義相似於對象。例如，包括數組索引在內的全部鍵都顯式表示爲字符串。數組中的第一個元素存儲在鍵「0」。

「長度」屬性只是另外一個不可枚舉和不可配置的屬性。一旦元素添加到數組中，JavaScript會自動更新「length」屬性的[[Value]描述對象。

演講第三部分：屬性的訪問優化

屬性訪問是JavaScript程序中最多見的操做。對JavaScript引擎來講，快速訪問屬性是相當重要的。

const object = {
	foo: 'bar',
	baz: 'qux',
};

// Here, we’re accessing the property `foo` on `object`:
doSomething(object.foo);
//          ^^^^^^^^^^
複製代碼

Shape

在JavaScript程序中，具備相同屬性鍵的對象是常見的。這樣的對象具備相同的Shape。

const object1 = { x: 1, y: 2 };
const object2 = { x: 3, y: 4 };
// `object1` and `object2` have the same shape.`
在相同Shape的對象上訪問相同的屬性也是很是常見的：
`function logX(object) {
	console.log(object.x);
	//          ^^^^^^^^
}

const object1 = { x: 1, y: 2 };
const object2 = { x: 3, y: 4 };

logX(object1);
logX(object2);
複製代碼

因此，JavaScript引擎能夠基於對象的Shape優化屬性的訪問。

假設咱們有一個屬性爲x和y的對象，它使用咱們前面討論過的字典數據結構：它包含做爲字符串的鍵，而且他們指向各自屬性的描述對象。

若是你訪問了一個屬性，例如object.y，JavaScript引擎將在js對象中查找關鍵字「y」，而後加載相應的描述對象，最後返回[[Value]]屬性的值。

若是每一個JS對象都存儲描述對象，會形成大量的重複和沒必要要的內存開銷。JavaScript引擎會將這些對象的Shape分開存儲。

這個Shape使用offset代替了[[Value]]，每個具備相同Shape的JS對象都指向這個Shape實例。

當有多個對象時，只要它們有相同的Shape，只須要存儲一個就能夠！

全部JavaScript引擎都使用Shape做爲優化，但它們並不都稱之爲Shape：

• 學術論文稱之爲Hidden Classes
• V8稱之爲Maps
• Chakra稱之爲Types
• JavaScriptCore稱之爲Structures
• SpiderMonkey稱之爲Shapes 演講中統一使用了Shape。

過渡鏈與過渡樹

若是一個對象指向某個Shape，你給它添加一個新的屬性，JavaScript引擎如何找到新的Shape。這類Shape在JavaScript引擎中造成所謂的「過渡鏈」。下面是一個例子：

對象開始時沒有任何屬性，所以指向空Shape。下一個語句將一個值爲5鍵爲「x」的屬性賦值給這個對象，所以JavaScript引擎將JS對象指向一個包含屬性「x」的Shape，而且將5添加到JS對象的第0位。下一行代碼添加了一個屬性「y」，所以引擎將JS對象指向另外一個包含屬性「x」和屬性「y」的Shape，而且將6追加到JS對象的第1位。

咱們甚至不須要爲每一個Shape存儲完整的屬性表。相反，每個Shape僅須要知道它所引入的新屬性。例如，在這種狀況下，咱們沒必要在最後一個Shape中存儲關於「x」的信息，由於它能夠在鏈中更早地找到。爲了作到這一點，每個Shape都和上一個Shape產生連接：

若是你在JavaScript代碼中編寫了o.x，JavaScript引擎經過過渡鏈找到引入屬性「y」的Shape，從而找到找到屬性「x」。

可是若是沒有辦法建立一個過渡鏈怎麼辦？例如，若是有兩個空對象，而且向每一個對象添加不一樣的屬性呢？

const object1 = {};
object1.x = 5;
const object2 = {};
object2.y = 6;
複製代碼

在這種狀況下，咱們必須使用分支取代鏈，咱們最終獲得一個過渡樹：

引擎對已經包含屬性的對象應用了一些優化。要麼從空對象開始添加「x」，要麼有一個已經包含「x」的對象：

const object1 = {};
object1.x = 5;
const object2 = { x: 6 };
複製代碼

對象在一開始就指向包含屬性「x」的Shape，有效地跳過空Shape。V8和SpiderMonkey就是這樣作的。這種優化縮短了過渡鏈，並使其更高效地從文字構造對象。

內聯緩存（ICs）

ICs是使JavaScript快速運行的關鍵因素！JavaScript引擎使用ICs來記住在何處查找對象屬性的信息，以減小查找次數。 這裏有一個函數getX，它獲取一個對象並從中加載屬性「x」：

function getX(o) {
	return o.x;
}
複製代碼

若是咱們在JSC中運行這個函數，它會生成下面的字節碼：

第一個get_by_id指令從第一個參數（arg1）加載屬性「x」，並將結果存儲到loc0中。第二個指令返回咱們存儲到的LoC0。

JSC還將內聯緩存嵌入到get_by_id指令中，該指令由兩個未初始化的槽組成。

如今假設咱們使用{x：「a」}參數來調用getX。如咱們所知，這個對象指向有屬性「x」的Shape，而且該Shape存儲了屬性「x」的偏移量和描述對象。當第一次執行該函數時，get_by_id指令查找屬性「x」，並發現該值被存儲在偏移量0。

嵌入到get_by_id指令中的IC記住了這個屬性是從哪一個Shape以及偏移量中找到的：

對於後續的運行，IC只須要比較Shape，若是它與之前相同，只需從存儲的偏移量中加載值便可。具體地說，若是JavaScript引擎看到對象指向了IC以前記錄的Shape，那麼就不須要從新去查找，能夠徹底跳過昂貴的屬性查找。這比每次查找屬性要快得多。

演講第四部分：有效的存儲數組

數組使用數組索引來存儲屬性。這些屬性的值稱爲數組元素。爲每一個數組元素存儲描述對象是不明智的。數組索引屬性默認爲可寫、可枚舉和可配置，JavaScript引擎將數組元素與其餘屬性分開存儲。

看一下這個數組：

const array = [
	'#jsconfeu',
];
複製代碼

引擎存儲的數組長度爲1，並指向包含length的Shape，偏移值爲0。

每一個數組都有一個單獨的元素後備存儲區，它包含全部數組索引的屬性值。JavaScript引擎沒必要爲每一個數組元素存儲任何描述對象，由於它們一般都是可寫的、可枚舉的和可配置的。

若是更改數組元素的描述對象，會怎麼樣？

// Please don’t ever do this!
const array = Object.defineProperty(
	[],
	'0',
	{
		value: 'Oh noes!!1',
		writable: false,
		enumerable: false,
		configurable: false,
	}
);
複製代碼

上面的代碼段定義了一個名爲「0」的屬性（剛好是一個數組索引），但它將屬性設置爲非默認值。

在這樣的極端狀況下，JavaScript引擎將整個元素後備存儲區做爲字典，映射描述對象到每一個數組索引。

即便只有一個數組元素有非默認描述對象，整個數組的元素後備存儲區也會進入這個緩慢而低效的模式。避免在元素索引上使用Object.defineProperty！

結語

本次演講讓咱們明白JavaScript引擎是如何工做的，如何存儲對象和數組，以及如何經過Shape和ICs優化了屬性的訪問，如何優化了數組的存儲。基於這些知識，爲咱們肯定了一些實用的能夠幫助提升性能的編碼技巧：

• 老是以一樣的方式初始化對象，它們最終會有相同的Shape。
• 不要修改數組元素的描述對象，它們能夠有效地存儲。

註記

• 本文結構及代碼來自 Mathias Bynens以及Benedikt Meurer 在 JSConf EU 2018 上所做的演講 JavaScript Engines: The Good Parts™。錄像地址：https://www.youtube.com/watch?v=5nmpokoRaZI&index=11&list=PL37ZVnwpeshG2YXJkun_lyNTtM-Qb3MKa
• 同時也能夠閱讀本次演講的Blog：https://mathiasbynens.be/notes/shapes-ics