前端性能优化三:现代浏览器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引擎原理的性能技巧。