というわけで、大量の画像を載せた横スクロールサイトを作っています。サイト全体で svg を使用する予定でしたが、ページで使用されている中程度から高度の複雑さの 20 ～ 30 個の svg 画像しかなく、Chrome ではすでにジャンクとスクロールの長いペイント時間が表示されているようです (Firefox はさらに悪いです。ただし、サファリの方がはるかに優れているようです）。
タイムラインをスクロール
サイトを表示する(スクロールは Mac でのみ機能し、Windows ユーザーは矢印キーを使用できます)
私の質問は、svgs の代わりに png を使用した場合、ペイント時間が短縮され、ジャンクが減少するかどうかです。ブラウザーが約 20 個の奇妙な SVG 画像で苦労しているのはなぜですか?
私もかつて似たようなことがありました。SVG は、上に示したものの 10 倍以上の幅で、約 20k の要素を含み、サイズは約 3MB でした。パフォーマンスを回復させた唯一のもの (ジャンプ アンド ラン ゲームだったので) は、バウンディング ボックスがビューポートとオーバーラップしているすべての要素を見つけることができるアルゴリズムでした。これにより、display: none;目に見えないものをすべて隠すことができます。
これにより、表示される要素の量がフレームあたり約 150 に減少し、ゲームは再びスムーズに実行されました。
ビューポートの高さは常に画像と同じだったので、バランスの取れたバイナリ ツリー (avl ツリー) と 1 次元の範囲クエリを使用しました。
幸運を！
[編集]
答えのようなものを残すのを忘れていました。私の経験から、大規模/巨大な SVG グラフィックスは、特に多くのスクリプトが発生している場合、レンダリングのボトルネックです。グラフィックの要素との対話性が不要で、大きな背景画像が必要な場合は、PNG 画像に基づくタイル マップを使用することをお勧めします。 »worlds«、したがって、2 つのポイントでパフォーマンスを得ることができます。
さらに、PIXI.js のようなものを使用して WebGL でレンダリングすることもできます。これにより、パフォーマンスが大幅に向上し、タイルマップとスプライトシートがサポートされます。
ベクター グラフィックスの利点 (スケーリング、インタラクティブ性) を主張する場合は、フレーム レートを高く保つために、できるだけ多くの要素を非表示にする方法を見つける必要があります。