编写高效JavaScript代码

本文是阅读Writing Fast, Memory-Efficient JavaScript后的总结和笔记，不是严格意义上的翻译，如果有时间，推荐阅读原文。

原则

不要做任何优化除非的确需要优化

任何的性能优化都必须以测量数据为基础，如果你怀疑代码存在性能问题，首先通过测试来验证你的想法。

性能优化三问

1. 我还能做哪些工作从而让代码变得更有效率？
2. 流行的JavaScript引擎通常会做哪些优化工作？
3. 哪些优化是JavaScript引擎不能做的，垃圾回收器是否能清理我们期望清理的？

对JavaScript引擎的深入了解有助于我们编写高效的JavaScript代码，但不要只针对某一特定引擎做性能优化。

V8的几个关键概念

• 基础编译器，解析你的JavaScript代码并生成Native Machine Code执行，而不是执行字节码或是直接对JavaScript解释执行。
• 在V8中，对象以object model的形式存在。对象在JavaScript中是以关联数组的形式存在，但V8采用的是Hidden Classes——一种对查找操作进行了优化的内部类型系统。
• 运行时探查器监视运行中的系统，并识别出Hot functions，即是耗用了较长时间的代码
• 优化编译器重新编译并优化由运行时探查器识别出来的Hot代码
• V8支持反优化，优化编译器能够发现过度优化的代码并对其进行处理
• V8有自己的垃圾回收器

垃圾回收

垃圾回收是一种内存管理机制，垃圾回收器会尝试清理掉不再被使用的对象，并回收内存。

• 在绝大多数情况下都不需要手动解除引用
• 你不可能强制垃圾回收器工作

删除引用的误区

尽可能不要使用delete，在下面的列子中，delete 带来的弊远远大于利

var o = { x: 1};
delete o.x;

主要的原因是为了避免在运行时修改Hot对象的结构，因为固定的对象结构有助于JavaScript引擎对其进行优化，而delete会导致对象结构改变

另外一个误区是将对象设置为null，将对象设置为null不会删除对象，只是将对象指向null，这要好过采用delete，但通常也是不必要的。

全局变量在整个页面生命周期中都是不会被清理的，无论页面打开多长时间，除非是刷新页面或者转到其他页面。局部变量(Function-scoped)在方法执行完后，且没有被引用的情况下将会被回收。

所以，请尽量避免使用全局变量

经验法则

为了使垃圾回收器尽早回收对象，不要保持不必要的对象引用

• 比手动解除引用更好的方法是将对象放在合适的变量域中，能用局部变量就不要采用全局变量
• 当事件监听不再需要时，请解除事件绑定，尤其是当事件绑定的DOM对象被删除时
• 如果有使用本地缓存，请确保有合适的清理机制（比如时效机制），从而避免大量无用的数据存储。

方法 (Function)

如前面所说，垃圾回收器只有在对象不可触及的时候才会对其做回收处理。考虑如下两个列子

function foo(){
  var bar = new LargeObject()
  bar.someCall();
}

function foo(){
  var bar = new LargeObject()
  bar.someCall();
  return bar;
}
var b = foo();

在第一个例子中，bar指向的对象会在方法执行完毕后处于可回收状态；在第二个列子中，由于在局部变量外维护了一个全局变量b，bar指向的对象无法被回收。

闭包 (Closures)

当一个方法返回一个内部方法时，被返回的内部方法能访问外部方法的局部变量域即使外部方法已经执行完毕。

function sum(x){
  function sumIt(y){
    return x + y;
  }
}
var sumA = sum(4);
var sumB = sumA(3);

在上面的例子中，sumIt方法即使处于sum的局部变量域中，但由于存在一个sumA全局变量，在sum执行完毕后也无法被回收。

再看两个例子

var a = function(){
  var largeObj = new LargeObject();
  return function(){
    return largeObj;
  }
}();

var a = function(){
  var smallObj = new SmallObj();
  var largeObj = new LargeObj();
  return function(n){
    return smallObj;
  }
}();

第一个例子中，largeObj可以通过变量a访问，因此不可被回收；在第二个例子中，方法一旦执行完毕，largeObj就无法被访问了，因此处于可回收状态。

定时器 (Timer)

在setTimeout / setInterval 方法中的引用，只有当定时器执行完成后才能被回收

V8优化小贴士

• 某些行为会导致V8停止优化工作，比如try-catch, 为了能弄清哪些代码可以被优化，哪些不能，你可以在V8命令行工具中使用—trace-opt file.js获得有用的信息。

• 如果你在意速度，那就尽可能保证你的方法是”单形的（monomophic）"

  不要做类似如下的尝试

  function add(x, y){
    return x+y;
  }
  add(1,2);
  add('a','b');
  add(my_custom_object, undefined);
  

• 不要加载没有被初始化或者已被删除的元素，尽管在输出上没有不同，但却会让代码变得更慢

• 不要写大方法，因为他们很难被优化。

对象还是数组， 如何选择？

• 如果存储的是大量数字，或者是相同类型的对象列表，采用数组；

• 如果根据语义你需要一个有很多属性的对象，那就采用对象，在内存利用方面这会很高效，同时也很快；

• 无论是数组还是对象，采用整数索引都最快的。

  var sum = 0;
  for (var x=0; x<arr.length; ++x){
    sum + = arr[x].payload;
  }
  

  var sum = 0;
  for(var x in obj){
    sum += obj[x].payload;
  }
  

  var sum = 0;
  for(var x=0; x<1000,++x){
    sum += obj[x].payload;
  }
  

  var sum = 0;
  var keys = Objects.keys(obj);
  for(var x=0; x<keys.length;++x){
    sum += obj[keys[x]].payload;
  }
  

  在上面的四段代码中，第一段和第三段速度比第二段和第四段要快很多。其中，第一段代码执行最快，最后一段代码执行最慢。

• 相比数组中的元素，对象的属性在结构上相对复杂。在引擎层面，内存中越是简单的结构越容易被优化，尤其是包含数字的数组。因此，如果你需要向量，采用数组而不是一个包含x, y, z属性的对象会有更优的性能表现。

在JavaScript中，数组和对象最重要的不同是数组的length属性，如果你能自己维护这个值，对象在V8中也能跑出数组的速度。

使用对象的性能小贴士

• 使用构造函数创建对象，因为所有采用同一构造函数创建的对象都具有相同的hidden class，另外，采用构造函数创建对象也比Object.create()这种方法略块。
• 尽管JavaScript没有限制类型数量和对象的复杂度，但长原型链和大量的对象属性会对性能造成损害。因此尽可能保持较短的原型链和较少的对象属性。

对象的拷贝

for..in循环是性能杀手，通过该方法遍历对象属性进行拷贝非常低效。拷贝大对象始终会降低性能，尽可能不要干这样的事情，当然大对象的存在本身就是一个错误。如果你确实需要在性能攸关的代码中拷贝对象，可以采用如下的方式。

function clone(original){
  this.foo = original.foo;
  this.bar = original.bar;
}
var copy = new clone(original);

缓存采用模块化编程（Module Pattern）的方法

// prototypal

Klass1 = function(){}
Klass1.prototype.foo = function(){
  log('foo');
}
Klass1.prototype.bar = function(){
  log('bar');
}

// Module pattern
Klass2 = function(){
  var foo = function(){
    log('foo');
  }
  var bar = function(){
    log('bar');
  }
  return {foo:foo,bar:bar}
}

// Module pattern with cached functions
var fooFn = function(){
  log('foo');
}
var barFn = function(){
  log('bar')
}
Klass3 = function(){
  return{
    foo: fooFn,
    bar: barFn
  }
}

执行速度从快到慢依次是

Module Pattern with Cached functions → prototypal → Module pattern

使用数组的性能小贴士

• 不要删除数组元素，当数组的Key set分布分散后，V8会将存储方式转为字典，导致速度变慢。
• 数组常量更高效，尤其是小数组和中等大小的数组。

var a = [1, 2, 3, 4]

var a = [];
for(var i=1, i<=4; i++){
  a.push(i);
}

不要采用第二段代码中的方法初始化数组。

• 不要在数组中存储不同类型的元素
• V8中，稀疏数组( Sparse Arrays)是被当成字典对待的，因此相比密集数组(Full Arrays)，执行速度更慢
• 与紧凑的数组相比，满身是洞的数组执行更慢，即使是从密集数组中删除一个元素，也会带来性能上的损失。
• 不要预先给大数组（大于64k）分配一个最大值

var arr = [];
for(var i = 0; i< 1000000; i++){
  arr[i] = 1;
}

var arr = new Array(1000000);
for(var i=0; i<1000000; i++){
  arr[i]=i;
}

需要注意的是，不同引擎在这一点上有不同，在Nitro(Safari）中，第二段代码跑得更快，但在V8(Chrome), SpiderMonkey(Firefox)中，第一段更快。

公众号搜索：front_end_talk