Javascript 画布动画性能优化。是否有开销呼叫'；这个'；？

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

开始工作，我是否应该最小化各种重复计算，将它们分解为各个部分，将它们作为局部变量存储在循环中并从这些部分开始工作

欢迎提出任何意见

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

提前谢谢

欢迎提出任何意见

你不需要意见，你需要的是硬数据！：）致：

在Chrome上使用闭包稍微快一点，在Firefox上慢一倍，在IE9上差不多。将对

this.cache

的引用缓存为

var cache=this.cache

会略微提高某些浏览器的速度。但是，速度差异不足以在您编写的任何代码中产生显著影响。如结果所示，我的测试以每秒数亿次的查找速度运行（每秒5000万次操作*3次查找），其中大部分可能与函数调用的开销相形见绌

关注画布绘图和任何循环算法，而不是单个代码行

欢迎提出任何意见

你不需要意见，你需要的是硬数据！：）致：

在Chrome上使用闭包稍微快一点，在Firefox上慢一倍，在IE9上差不多。将对

this.cache

的引用缓存为

var cache=this.cache

会略微提高某些浏览器的速度。但是，速度差异不足以在您编写的任何代码中产生显著影响。如结果所示，我的测试以每秒数亿次的查找速度运行（每秒5000万次操作*3次查找），其中大部分可能与函数调用的开销相形见绌

---

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

a）小心过早的优化（特别是当你不选择算法，而只是代码的变化时）：：b）你很容易自己测试这一点（并发现它没有可测量的差异）。实际绘图可能比访问属性花费的时间要长。谢谢Phrogz，如果确实是这样，请重新键入它作为答案，我很乐意接受。关于测试我自己，我很抱歉，如果我知道怎么做，我会这么做的。无论如何，谢谢你的评论。：）a） 小心过早的优化（特别是当你不选择算法，而只是代码的变化时）：：b）你很容易自己测试它（并发现它不会产生可测量的差异）。实际绘图可能比访问属性花费更长的时间。感谢Phrogz，如果真是这样的话，请重新输入答案，我很乐意接受。关于测试我自己，我很抱歉，如果我知道怎么做，我会这么做的。无论如何，谢谢你的评论。：）真棒的回答，弗罗兹。。。非常感谢。我们学到了一些好东西。我也在那里做基准测试。干杯：-）回答得很好，但对被问到的问题回答得不太好。OP似乎最感兴趣的是

render（）

内部的本地

self

变量是否会更快，而不是闭包。@MattGreer啊，我想你可能是对的。我在第一次阅读时没有理解这一点。我已经更新了测试以包含此变化。结果是，在某些浏览器中，将

缓存

对象缓存为局部变量比显式使用

这个.cache

快一点（在Chrome上，关闭速度稍快，在Firefox上则慢得多）。。。非常感谢。我们学到了一些好东西。我也在那里做基准测试。干杯：-）回答得很好，但对被问到的问题回答得不太好。OP似乎最感兴趣的是

render（）

内部的本地

self

变量是否会更快，而不是闭包。@MattGreer啊，我想你可能是对的。我在第一次阅读时没有理解这一点。我已经更新了测试以包含此变化。结果是，在某些浏览器中，将

缓存

对象作为局部变量缓存比显式使用

this.cache

要快得多（在Chrome上，关闭速度稍快，在Firefox上则慢得多）。

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()