0

HTML5 キャンバス アニメーションを最適化しています。

構造は次のようになります。

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

   }

}

render 関数内でthis.cache.var1、this.cache.var2etc... を複数回呼び出して、それらに対してさまざまな計算を実行しています。

私が知りたいのは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 では 2 倍遅く、IE9 ではほぼ同じです。this.cacheasへの参照をキャッシュするとvar cache=this.cache、一部のブラウザで速度がわずかに向上します。ただし、速度の違いは、作成中のコードに顕著な影響を与えるほど顕著ではありません。結果に示されているように、テストは 1 秒あたり数億回のルックアップ (5,000 万回の操作/秒 * 1 回の操作で 3 回のルックアップ) で実行されており、その多くは関数呼び出しのオーバーヘッドによって小さくなっている可能性があります。

コードの個々の行ではなく、キャンバスの描画とループ アルゴリズムに注目してください。

于 2012-11-07T17:49:40.280 に答える