V8引擎和JavaScript优化建议

V8引擎和JavaScript优化建议

V8 是谷歌用于编译 JavaScript 的引擎,Firefox 同样也有一个,叫 SpiderMonkey,它和 V8 有一些不同,但总体颇为相似。我们将在本篇文章中讨论 V8。

V8 引擎的一些基础点:

  • 用 C++ 语言实现,使用在 Chrome 浏览器和 Node.js 中(以及最新版的 Microsoft Edge)
  • 遵循 ECMA-262 标准

    JavaScript 旅程

当我们把压缩、混淆以及做了各种处理的 JavaScript 放到 V8 引擎中解析时,到底发生了些什么?

下图阐述了整个流程,接下来我们会对其中的每个步骤进行详细说明:

在本篇文章中,我们将探讨 JavaScript 代码是如何被解析的,以及如何最大程度的优化 JavaScript 的编译效率。V8 里的优化编译器(又名 Turbofan)拿到 JavaScript 代码之后,会将其转化成高效率的机器码,因此,我们能向其输入越多的代码,我们的应用就会越快。附注一点,Chrome 里的解释器称作 Ignition。

JavaScript 解析

整个过程中的第一步是解析 JavaScript。首先探讨什么是解析。

解析有两个阶段:

  • Eager(全解析)- 立即解析所有的代码
  • Lazy(预解析)- 按需做最少的解析,剩下的留到后面

哪一种方式更好则需要根据实际情况来决定。

下面来看一段代码。

1
2
3
4
5
6
7
8
9
10
11
// 变量声明会被立即解析
const a = 1;
const b = 2;

// 目前不需要的暂时不解析
function add(a, b) {
return a + b;
}

// add 方法被执行到了,所以需要返回解析该方法
add(a, b);

变量声明会被立即解析,函数则会被懒解析,但上述代码里紧接着就执行了 add(a, b),说明 add 方法是马上就需要用到的,所以这种情况下,把 add 函数进行即时解析会更高效。

为了让 add 方法被立即解析,我们可以这样做:

1
2
3
4
5
6
7
8
9
10
11
// 变量声明会被立即解析
const a = 1;
const b = 2;

// eager parse this too
var add = (function(a, b) {
return a + b;
})();

// add 方法已经被解析过了,所以这段代码可以立即执行
add(a, b);

这就是大多数模块被创建的过程。那么,立即解析会是高效 JavaScript 应用的最好方式吗?

我们可以用 optimize-js 这个工具对公共库代码进行完全的立即解析处理,比如对比较有名的 lodash 进行处理后,优化效果是很显著的:

  • 没有使用 optimize-js:11.86ms
  • 使用了 optimize-js:11.24ms

必须声明的是,该结果是在 Chrome 浏览器中得到的,其它环境的结果则无法保证:

如果您需要优化应用,必须在所有的环境中进行测试。

另一个解析相关的建议是不要让函数嵌套:

1
2
3
4
5
6
7
8
9
// 糟糕的方式
function sumOfSquares(a, b) {
// 这里将被反复懒解析
function square(num) {
return num * num;
}

return square(a) + square(b);
}

改进后的方式如下:

1
2
3
4
5
6
7
8
9
10
function square(num) {
return num * num;
}

// 好的方式
function sumOfSquares(a, b) {
return square(a) + square(b);
}

sumOfSquares(a, b);

上述示例中,square 方法只被懒解析了一次。

内联函数

Chrome 有时候会重写 JavaScript 代码,内联函数即是这样一种情况。

下面是一个代码示例:

1
2
3
4
5
6
7
8
9
10
const square = (x) => { return x * x }

const callFunction100Times = (func) => {
for(let i = 100; i < 100; i++) {
// func 参数会被调用100次
func(2)
}
}

callFunction100Times(square)

上述代码会被 V8 引擎进行如下优化:

1
2
3
4
5
6
7
8
9
10
const square = (x) => { return x * x }

const callFunction100Times = (func) => {
for(let i = 100; i < 100; i++) {
// 函数被内联后就不会被持续调用了
return x * x
}
}

callFunction100Times(square)

从上面可以看出,V8 实际上会把 square 函数体内联,以消除调用函数的步骤。这对提高代码的性能是很有用处的。

内联函数问题

上述方法存在一点问题,让我们看看下面这段代码:

1
2
3
4
5
6
7
8
9
10
11
12
const square = (x) => { return x * x }
const cube = (x) => { return x * x * x }

const callFunction100Times = (func) => {
for(let i = 100; i < 100; i++) {
// 函数被内联后就不会被持续调用了
func(2)
}
}

callFunction100Times(square)
callFunction100Times(cube)

上面的代码中先会调用 square 函数100次,紧接着又会调用 cube 函数100次。在调用 cube 之前,我们必须先对 callFunction100Times 进行反优化,因为我们已经内联了 square 函数。在这个例子中,square 函数似乎会比 cube 函数快,但实际上,因为反优化的这个步骤,使得整个执行过程变得更长了。

对象

谈到对象,V8 引擎底层有个类型系统可以区分它们:

单态

对象具有相同的键,这些键没有区别。

1
2
3
// 单态示例
const person = { name: 'John' }
const person2 = { name: 'Paul' }

多态

对象有相似的结构,并存在一些细微的差别。

1
2
3
// 多态示例
const person = { name: 'John' }
const person2 = { name: 'Paul', age: 27 }

复杂态

这两个对象完全不同,不能比较。

1
2
3
// 复杂态示例
const person = { name: 'John' }
const building = { rooms: ['cafe', 'meeting room A', 'meeting room B'], doors: 27 }

现在我们了解了 V8 里的不同对象,接下来看看 V8 引擎是如何优化对象的。

隐藏类

隐藏类是 V8 区分对象的方式。

让我们将这个过程分解一下。

首先声明一个对象:

1
const obj = { name: 'John'}

V8 会为这个对象声明一个 classId。

1
const objClassId = ['name', 1]

然后对象会按如下方式被创建:

1
const obj = {...objClassId, 'John'}

然后当我们获取对象里的 name 属性时:

1
obj.name

V8 会做如下查找:

1
obj[getProp(obj[0], name)]

这就是 V8 创建对象的过程,接下来看看如何优化对象以及重用 classId。

创建对象的建议

应该尽量将属性放在构造器中声明,以保证对象的结构不变,从而让 V8 可以优化对象。

1
2
3
4
5
6
7
8
9
class Point {
constructor(x,y) {
this.x = x
this.y = y
}
}

const p1 = new Point(11, 22) // 隐藏的 classId 被创建
const p2 = new Point(33, 44)

应该保证属性的顺序不变,如下面这个示例:

1
2
3
4
5
6
7
8
9
10
11
12
const obj = { a: 1 } // 隐藏的 classId 被创建
obj.b = 3

const obj2 = { b: 3 } // 另一个隐藏的 classId 被创建
obj2.a = 1

// 这样会更好
const obj = { a: 1 } // 隐藏的 classId 被创建
obj.b = 3

const obj2 = { a: 1 } // 隐藏类被复用
obj2.b = 3

其它的优化建议

接下来我们看一下其它的 JavaScript 代码优化建议。

修正函数参数类型

当参数被传进函数中时,保证参数的类型一致是很重要的。如果参数的类型不同,Turbofan 在尝试优化4次之后就会放弃。

下面是一个例子:

1
2
3
4
5
6
7
8
9
function add(x,y) {
return x + y
}

add(1,2) // 单态
add('a', 'b') // 多态
add(true, false)
add({},{})
add([],[]) // 复杂态 - 在这个阶段, 已经尝试了4+次, 不会再做优化了

另一个建议是保证在全局作用域下声明类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 不要这样做
function createPoint(x, y) {
class Point {
constructor(x,y) {
this.x = x
this.y = y
}
}

// 每次都会重新创建一个 point 对象
return new Point(x,y)
}

function length(point) {
//...
}

结论

希望大家学到了一些 V8 底层的知识,知道如何去编写更优的 JavaScript 代码。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×