この質問は、単なるスクリプトの質問ではなく、HTML および CSS によって作成/レンダリングされたオブジェクトをブラウザが処理する方法に関係しています。
100 ピクセル x 100 ピクセルの div があり、半透明の青い背景にしたいが、ブラウザの互換性のために CSS を使用して背景色を RGBA に設定したくない場合 (そしてアルファを調整するだけ)問題があるので、代わりに、半透明の青一色の .png ファイルを作成し、div の背景画像をその png ファイルに設定してから、並べて表示します....
1px の正方形の画像を 100 個並べることができます。
また
25px の正方形の画像を 4 つ並べて表示できます。
どちらも同じ効果を生み出しますが、1 ピクセルの正方形の画像は 25 ピクセルの画像の正方形よりもはるかに速く読み込まれます....しかし、画面に 100 の画像の正方形があると、画面に 4 つの画像しかない場合よりもブラウザの速度が遅くなるかどうか疑問に思っています。それはより大きな画像ですか？ブラウザ自体は、画像タイルごとに新しい参照を作成し、それらすべてを追跡してそれらすべての位置を更新する必要がありますか?
Web画面に1px x 1pxの画像を100,000枚配置すると、画面に100,000px x 100,000pxの画像を1枚配置するよりも遅くなるようですか? 特にユーザーが上下にスクロールしている場合。右？