一个Vue引发的性能问题

笔者最近在一个Vue项目里面引入了一个动画库，但是发现性能有点异常，项目里面使用的CPU是在一个demo页面的3.5倍左右，我已经把项目里所有其它干扰的东西都给删掉了，但是CPU就是降不下去，如下图所示，正常范围是在2.1%左右波动：

但是引到项目里面就变成了7%左右波动：

这个会不会是因为html嵌套太深导致Layout等计算复杂，所以CPU上升了呢，笔者尝试把DOM结构简单化，以及加上contain: strict等Layout隔离的方法，也是没有效果。所以只能是JS执行问题了，通过Chrome devtools的Performance可以研究这个问题。

如下图所示：

上面密密麻麻的线都是requestAnimationFrame的回调，把它放大，然后查看一个回调，比较一下demo页面和Vue页面的不同之处，如下图所示：

这里明显可以看出区别，demo.html每个回调的执行时间是0.3ms左右，而Vue项目的回调执行时间达到了0.8ms左右，快接近3倍，且调用栈深了很多。多出来的这些东西是什么呢？仔细一看：

这些东西是Vue里面的，也就是Vue里面setter，部分回调里面还包含了Vue里的getter：

这个时候恍然大悟，因为Vue里面重写了变量的getter/setter，导致获取某个属性或者改写某个属性的时间变长，导致CPU上升。造成Vue重写的原因是因为在代码里面把动画库的变量当成了组件里this的属性，如下代码所示：

import Player from 'player.js';

export default {
  data: {
    return {
      player: new Player()
    };
  }
};复制代码

然后Vue就会遍历这个player对象，给所有的属性都加上setter/getter，如下控制打印所示：

这里的Ir.set就是上面Performance里面的截图，也就是这个导致了设置Ii变量变慢了。这里我们注意到一个细节，Chrome控制台会直接打印没有覆盖setter/getter的Object，而设置了的，将会是用“(...)”代替，然后等到你去点的时候再去获取它当前的值显示出来。

从Vue源码里面可以看到，Vue会对成员变量进行defineProperty设置setter和getter：

// 代码有所删减
function defineReactive$$1 (obj, key, val) {
  var dep = new Dep();
  
  var property = Object.getOwnPropertyDescriptor(obj, key);
  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;

  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      return value
    },
    set: function reactiveSetter (newVal) { 
      var value = getter ? getter.call(obj) : val;
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      dep.notify();
    }
  });
}复制代码

以便使用者设置值的时候做一些通知，从而达到数据驱动的目的。但同时也有可能造成性能问题，在这个例子里面是增加了0.3ms左右的调用时间。实际上这个时间几乎是可以忽略的，但是由于这个例子里面需要运行在requestAnimationFrame里面，1s调用60次，比较频繁，原本的时候也就才0.2ms，而现在由于这个setter/getter，增加了0.3ms，比正常时间多了一倍多，所以CPU就升上去了。

知道原因就能解决问题了，现在的解决方式是不要把这个player变量当成this里面的成员属性，而是把它弄到外面去，如下代码所示：

import Player from 'player.js';
let player = new Player();

export default {
  data: {
    return {
    };
  }
};复制代码

这个时候CPU从7%降到了4%左右，快接近一半，如下图所示：

查看Performance里面的setter的调用栈就没有了，如下图所示：

但是CPU仍然是demo页面的两倍（2%和4%），这个时候继续查看调用栈，发现是一个ji的函数调用时间一个是另一个的两倍：

这两个函数点过去Source面板看代码的时候确认是两个一样的函数，这里唯一的区别可能在于demo.html用的是压缩的代码，而本地的项目是未压缩，如果打包压缩一下，放到测试环境，可以看到CPU时间基本就差不多了：

压缩代码里面会把多条语句合并为一条语句应该也会提升点性能。

最后，本文并不是说Vue的实现有问题，只是需要注意setter/getter对性能的影响，特别是在一个动画的回调里面，一般情况下对于一次性的操作影响几乎是可忽略的，应该不需要关心这个问题。另外，只是设置动画里面的setter/getter也不一定会使CPU一下子就升上去了，还要看你在setter/getter里面干了些啥，在Vue里面可以看到它的调用栈是比较深的，可能内部需要判断的东西比较多。

一个Vue引发的性能问题

猜你喜欢