前端性能優化三:現代瀏覽器javascript性能優化-ICs

前端性能優化一:性能指標

前端性能優化二:現代瀏覽器javascript性能優化(1)

前面一章已經介紹了一些javascript一些開發時候可使用的性能優化技巧,這一章介紹一些js編譯器內部機制,幫助你能寫出更高效的js代碼。

Shapes(hidden class)

在js中對象被定義爲一個字典的數據結構,string類型的key做爲屬性key,key對應的值相似這個樣子

除了value之外,還定義了另一些attributes

• [[Writable]]:屬性是否能夠被賦值
• [[Enumerable]]:屬性是否能夠在for in 循環中出現
• [[Configurable]]:屬性是否能夠被刪除

你也經過Object.getOwnPropertyDescriptor(object, 'foo');得到這些屬性.

array在js中是一個特殊的對象,index是做爲一個特殊的屬性維護,同時array還維護一個length的屬性，只不過length的屬性他的Enumerable和Configurable都是false。

ok,咱們知道了在js中是怎麼定義對象的了。對於對象來講屬性的讀取和賦值是最經常使用的功能,js引擎爲了讓整個操做更高效,引入了一個Shapes的對象。整個Shapes對象的實現方式是每一個js內核都有的實現方式,只不過在每一個js內核裏叫法不同,可能比較常見的叫法叫作hidden class,由於跟ES6中class的叫法會有些混亂因此咱們這裏用SpiderMonkey內核中的叫法Shapes。下面就看看Shapes是怎麼讓屬性的存取更高效的。

仍是咱們以前的對象a = { x:5,y:6 },以前在內存中的儲存方法,把他的一個屬性的全部值都存在一個JSObject中,假設咱們如今還有一個a = { x:7,y:8 },或者多個屬性名稱都同樣的對象,那麼這麼存儲對象是否是有些浪費內存,由於他們都有相同的屬性名稱和attributes。咱們屬性的名稱和attributes存在一個共同的shape中,而且分別將value存到另一個對象當中,將這個對象所在的索引也存在shape中。

那有多個相同屬性和attributes的對象時好處就很明顯了。不論有多少個對象，只要他們是同樣的shape,咱們只須要存儲一次他們shape就能夠了。

可是在js中有幾種狀況是沒法共享shapes的

第一種狀況就是若是屬性的順序不同是沒法共享shape的,例如:{ x: 4, y: 5 }和{ y: 5, x: 4 }他們的shape是不同的

另一種狀況

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

這是一種在js中很是常見的寫法,先定義一個空對象,而後在建立對象屬性。在js引擎中這種狀況是怎麼存的呢?

1. 首先執行第一行代碼的時候會先建立一個空的shape,由於初始化的對象沒有屬性
2. 當執行第二行代碼，增長一個x的屬性給對象而且賦值爲6,js引擎會建立一個新的shape包含x,而且有一個指針指向前一個shape
3. 第三行代碼又添加了一個新的y屬性,js引擎會在建立一個新的shape,這時shape只包含y,而且這個shape有一個指針指向前一個shape。

這個建立新的shape而且鏈接前一個shape的操做叫作shape變遷。

若是咱們要給o.y賦值,js引擎會先查找x所在的shape,經過最後一個shape對前一個shape的引用一直到找到包含x的shape而且賦值。

const a = {};
a.x = 5;
const b = { x: 6 };
複製代碼

js引擎在建立shape時並非一直都是從空的shape開始建立的,若是你建立的對象一開始就包含某幾個屬性,不必從空的shape開始建立.而是能夠直接建立一個包含全部屬性的shape.因此a對象從shape變遷獲得的xshape和直接獲得的xshape是兩個不同的shape對象。

能意識到申明對象的方式對建立shape的影響是很是有必要的, 由於共享shape除了節省一些內存之外對於js執行效率起着很是大的做用,爲何呢?

Inline Caches

在js引擎中引入shape這個對象的主要緣由實際上是由於Inline Caches(ICs).ICs是一個js可以快速運行的關鍵因素。js引擎用ICs緩存對象屬性查找的信息,減小查找對象屬性帶來的開銷。

好比咱們有這麼一個方法

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

這個方法總共有一個參數o,而且訪問了參數o的x屬性.

inline cache會緩存4個字段分別是

• shape:調用參數他的shape對象
• prop:方法中須要使用的參數對象的屬性
• offset:shape中屬性值對象的索引
• state:有三個值,會在運行時根據實際狀況變化
  • Monomorphic:運行時方法中使用的參數shape是同一個
  • Polymorphic:shape不一致
  • Megamorphic:同時存在Monomorphic和Polymorphic的狀況

當方法被第一次調用的時候inline cache中沒有值,將第一次調用參數的shape對象放入shape緩存,並將offset賦值成x屬性的offset。當後續繼續調用這個方法的時候不論什麼參數對象,只須要對比shape是不是同一個shape(也就是共享的shape),若是是同一個shape直接使用offset去值對象中取值就能夠了.減小了不少的查找開銷。因此保持inline cache狀態爲Monomorphic對性能會有很大的幫助。react團隊作了一個實驗同一個方法Monomorphic比Polymorphic的性能會高出100倍。

Shapes和ICs在React中的應用

在React中template會用一個FiberNode的對象來表示,FiberNode在我看來是介於Template和Dom的一個對象。

他須要在React各個方法之間很是頻繁的被使用,可是在React Template中會有 HtmlElement, Text, Component等等不一樣類型的Node，React會將不一樣類型的Node不一樣的屬性字段都合併到一塊兒,這樣咱們就有一個全部屬性都同樣的FiberNode,也就是說他們的shape是徹底同樣的了，所以不論在哪一個方法中使用FiberNode inline cache均可以保持Monomorphic的狀態,這就大大的減小了方法讀取屬性值的開銷,增長了性能。

結論

咱們這裏討論了js引擎是如何存儲對象以及數組這個有點特殊的對象,也討論了shapes和inline cache是如何幫助性能的。基於這些知識,咱們知道了在寫js哪些寫法是有助於提升性能的 用同一種方式來初始化對象,這樣他們就能共享shapes。後面咱們還有討論更多的相似的基於js引擎原理的性能技巧。