Question

我正在优化HTML5画布动画。

结构如下：

Animation = {
     //Cache constant variables
    cache : {
            var1 : 1,
            var2 : 2,
            var3 : 3
    },
    render : function(){
      //render to canvas

   }

}

在渲染功能中，我在整个过程中多次调用this.cache.var1，this.cache.var2等...并对其执行各种计算。

我想知道的是，如果在单个循环中反复调用this会带来很大的开销，那么如何最好地优化它？

我应该只在渲染循环中存储本地副本（self=this;）并从self开始工作，我是否应该考虑最小化各种重复计算，将它们分解为各个部分，将它们存储为循环中的局部变量和那些工作？

欢迎任何意见。

注意：我知道这可能被认为是微优化，但在处理繁重的动画处理时，我真的想挤压我能得到的最后一滴。

提前致谢。

Answer 1

欢迎任何意见。

你不想要意见，你想要硬数据！ :)致白：

http://jsperf.com/this-versus-closure

Anim1 = {
   cache:  { var1:1, var2:2, var3:3 },
   render: function(){
     return this.cache.var1 + this.cache.var2 + this.cache.var3;
   }
};

AnimMaker = function(){
  var cache = { var1:1, var2:2, var3:3 };
  this.render = function(){
    return cache.var1 + cache.var2 + cache.var3;
  }
};
Anim2 = new AnimMaker;

Anim3 = {
   cache:  { var1:1, var2:2, var3:3 },
   render: function(){
     var cache = this.cache;
     return cache.var1 + cache.var2 + cache.var3;
   }
};
// Now compare Anim1.render() vs Anim2.render() vs Anim3.render()

在Chrome上使用闭包稍微快一点，在Firefox上使用两倍，在IE9上也差不多。将this.cache的引用缓存为var cache=this.cache可以在某些浏览器上略微提高速度。但是，速度差异不足以在您编写的任何代码中产生明显的影响。如结果所示，我的测试每秒运行数亿次（每次操作5000万次操作/ 3次查找），其中大部分可能与函数调用的开销相形见绌。

专注于画布绘图和任何循环算法，而不是单独的代码行。

Canvas动画性能优化。是否开销称呼'这个'？

1 个答案:

http://jsperf.com/this-versus-closure