0

我正在优化 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（

欢迎任何意见。

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

提前致谢。

4

1 回答 1

3

欢迎任何意见。

你不想要意见，你想要硬数据！:) 惠特：

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.cacheas的引用会var cache=this.cache略微提高速度。但是，速度差异不足以对您编写的任何代码产生显着影响。如结果所示，我的测试以每秒数亿次查找运行（5000 万次操作/秒 * 每次操作 3 次查找），其中大部分可能与函数调用的开销相形见绌。

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

于 2012-11-07T17:49:40.280 回答