NW/Node Webkit - 画像がすでに表示されていても、画像を復号します。

Question

現在、JavaScript(pure js)ベースのゲームで作業しています。このゲームは、5つの大きなスプライトシートを含む（例えば、2861 × 768および4096 × 4864）。ゲームが始まると、5つのスプライトシートすべてがキャンバス要素にプリロードされます。これらの5つのスプライトのうちの3つは、それぞれのスプライトが75フレームを含む1つのアニメーションを一緒に表します。あるスプライトがそのアニメーションで終了すると、それを隠して次のスプライトを表示します。 2番目のスプライトがアニメートを終了すると、私はそれを隠し、3番目の/最後のスプライトを表示します。

2番目または3番目のスプライトが表示されようとしているとき、0.5s-1sのわずかな遅延が発生します。画像がデコードされています。

これは初めてのことではなく、いつも起こることです。そしてそのアニメーションは5分ごとに繰り返され、小さな遅延は常に起こります。

プリロードのためにキャンバス要素を使用しているのは、WebKitが未使用の状態でデコードされたイメージを投げ捨てるだけで、キャンバス要素がWebKitがメモリからそれを削除できないと考えたからです。しかし、それは動作しません。

私が知っているほぼすべての最適化を試しました。子孫セレクタなどを削除してCSSをすべてリファクタリングしました。

私はそれらのアニメーションを描画するために使用しているレンダリングは自分で作成していますので、それは問題ではない可能性がありますよくFirefoxで。

： 私はキャンバスでモードを作りましたが、その結果はさらに悪化しました。それはずっと遅れている。そして、遅延は同じままです。 NWでのみ、問題はFirefoxではなくChromeで維持されます。

キャンバスモード - より遅れる：

デフォルト（HTML）モード - 完璧な作品：

Codepen：私のレンダラhttp://codepen.io/anon/pen/JXPWXX

注：を私は他のものと非表示にした場合要素がopacity:0ではなくopacity:0.2である場合、問題は発生しません。しかし、まだ見えているので、私はそれらを隠すことはできません。彼らは目に見えてはならない。 opacity:0.01を追加しても表示されず、Chromeで問題が発生することはありませんが、引き続きNWに残っています。

NWでは、不透明度：0.2から不透明度：1に切り替えると、画像デコードが処理されています。 Chromeブラウザでも同じことは起こりません。

nw.js v0.12.3 
io.js v1.2.0 
Chromium 41.0.2272.76 
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45 

3つの画像スプライトは14.4メガバイト、14.9メガバイトと15.5メガバイトのサイズです：

私は次のバージョンを使用しています。各スプライトには75フレームが含まれます。

なぜこのようなことが起こりうるのですか？どうすれば防止できますか？

Answer 1

新しいnwバージョンが19.04.2016にリリースされている可能性があるため、google-chromeに直接切り替えてみてください。その後、NWはChromiumのすべてのリリースに対応していきます。

あなたはChromeで同じ問題を起こすべきではありません。

Answer 2

idata = ctx.getImageData(0, 0, canvas.width, canvas.height)を使用して、キャンバスからデータ配列を取得し、次にctx.putImageData(idata, 0, 0)を使用して、キャンバスを隠すのではなくスプライトを切り替えることをおすすめします。

Answer 3

イメージがまだ表示されていると考えると、問題は消えてしまいます（不透明な実験が示すように）、私は可視領域からほとんど完全に移動します。オーバーフロー隠しを使用して）。

アンパックされた4000x4000スプライトシートは、64メガバイトのRAM（1ピクセルあたり4バイト（RGBA））を使用するため、次の画像が事前に「ウォームアップ」されることを確認する方がよいかもしれない彼らのすべてをいつも解凍しておく必要はありませんか？