面向前端开发者的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 数据技术嘉年华 - 成都站

• 内含赠票福利 | 你可能正在错过一场下半年最火的互联网大会