Webkitがキャンバスに大きな画像で遅れます

Question

Webkit（chrome/safari）と大きな画像を持つCanvasにいくつかの問題があります。

私の顧客にとっては、キャンバス上にフレームごとに80msの変化するイメージを持つアニメーションイントロムービーを書く必要がありました。

130フレームあり、単一の画像を4つのスプライトに入れて、ページの単一要求の負荷を軽減する必要がありました。

すべてのスプライトサイズは約2,5MBで、必要なフレームの一部だけをスライスします。これまで可能だった。

多くのコードに迷惑をかけたくないです。 。しかし、最終的にはそれだけのことだ：img.width-1、

この$ context.drawImage（IMG、0、トップ、（img.height/sequenceCount）-1、0、0、この$。 canvas.width、this。$ canvas.height）;

魔女は、80ミリ秒のタイムアウト内で呼び出されます。

私たちはそれを行い、すべての主要なブラウザで動作します。しかしWebkitでは、次のスプライトに変更するたびに約400msのハードラグが発生します。

同じ問題がIE9とあったが、それは最初

if (Browser.ie9) { 
     for(var x = 0; x < this.sequence[0].sprites.length; x++){     
      this.draw(this.sequence[0].sprites[x].obj, 0, 1); 
     }     
     this.$context.clearRect(0, 0, this.$canvas.width, this.$canvas.height); 
    } 

に一度のスプライトを描画して固定することができた（描画関数の前の例からだけのdrawImageの機能が含まれています。）

しかしWebkitブラウザでは、この遅れ時間は約400msです。

はい、画像がプリロードされています。これは問題ではありません。

これはどんな考えですか？

ありがとうございました！

Answer 1

キャンバスまたはイメージの幅を取得するたびに、DOMにアクセスしています（通常はJSメモリにアクセスするよりも時間がかかります）。これらの値をサイズ変更に保存して、代わりに保存された値を使用すると、改善が見られるかもしれません。答えを

var canvasWidth, canvasHeight, imgWidth, imgHeight;