Javascriptでたくさんの画像を読み込んだときにクロムタブがクラッシュする

Question

DOMに<canvas>タグを1つ使用し、シーケンスを再生するためにすぐにclearRectとdrawImageを呼び出すJavascript画像シーケンスオブジェクトがあります。一度に1つのシーケンスだけを読み込む必要がありますが、すべてのシーケンスをキューに入れておくと、より速くスムーズになります。

イメージのサイズはそれぞれ8680x1920、JPGとして約1.5mbとかなり大きいです。私は一度にすべての代わりに個々のセットを個別にロードするボタンを持っています。最初のシーケンスセットはすべて正常に読み込まれますが、Windows 7 BusinessのChrome 51では2番目のエラーがクラッシュします（Aw Snapページ）。

Devは私のMac Proで起きていて、完璧に動作し、3つのシーケンスすべてをうまく読み込めます。私のMac Proの仕様は、PCよりはるかに低いです。 PCは、i7クアッドコア、32GBのRAM、2倍のM5000 Nvidia Quadroカード（Syncカード付き）です。私の理解は、Chromeはこれらの高度なハードウェアのほとんどを利用していないことですが、私たちは他の部分にも必要です。

既存のイメージオブジェクトを空のソースに設定してから次のシーケンスにロードする前にヌルに設定しようとしましたが、DOMから<canvas>タグを削除しようとしましたが、何も役立たないようです。また、Chromeの[ネットワーク]タブを見ても、1.5GBが転送された直後にクラッシュが発生することがわかりました。 Chromeのタスクマネージャには、WindowsとMacの両方で約8GBのメモリ使用率で1つのシーケンスがロードされたタブがあります。

これは、インターネットから切断されるわかりにくい一度限りのインストールであるため、セキュリティ上の問題やベストプラクティスについては心配していません。

私は最近、パフォーマンス上の理由

Answer 1

あなたが一度にシーケンス全体をロードすべきではないため<canvas>タグに<img>タグを変更したことを反映するように更新。 RAMが不足している可能性が最も高いです。メモリ内のJavascriptを使用して数フレーム前にロードし、そのイメージをイメージタグに割り当てます。変数を上書きするか、delete演算子を使用して、先読みキャッシュをクリアしてください。

第2に、src属性を変更すると、DOM全体が再描画されます。これは、src属性が変更された場合、イメージはサイズが変更された可能性があるとみなされ、後のすべての要素がシフトして再描画する必要があるためです。

画像を<div>の背景として設定し、background-imageのスタイルを更新することをお勧めします。 <canvas>に画像を書き込むこともできます。どちらの場合でも、要素だけが再描画する必要があります。

最後に、<video>タグは、おそらくフレームシーケンスを効率的に処理するように設計されているので、おそらく最良のオプションです。ラグのない個々のフレームをスクラブするには、keyframe every 1 frames設定でエンコードするか、キーフレームを使用しない圧縮されていない形式でビデオをエンコードします。キーフレームは、ビデオの特定の間隔でスナップショットに似ています。後続のすべてのフレームは、最後のキーフレーム以降に変更された部分のみを再描画します。したがって、キーフレームが離れている場合、特定のフレームを検索するには、キーフレームをレンダリングする必要があります。その間のすべてのフレームを追加して、フレームの最終イメージを取得します。すべてのフレームにキーフレームを置くことで、差分圧縮を使用できないためビデオが大きくなりますが、高速に検索する必要があります。