html - 処理性能: 背景色 vs 静止画像

Question

破線の境界線を持つ大きな div (960x1250 ピクセル) に単色を配置する傾向がありました。だから、私が適用した2つの解決策があります：

1. 使い方background-colorとborder:CSSタグ
2. 静的な PNG-8 画像を使用する

両方をテストしましたが、違いはわかりませんでした。background-colorタグと静的画像を使用した場合の Web ブラウザーのパフォーマンスを実験する人はいますか?

事前の回答ありがとうございます。

Answer 1

あなたは最初の解決策を好むべきです。

数キロバイトの画像データと比較して数バイトのCSSは（画像が小さくて繰り返されている場合でも）、クライアント側での読み込みとキャッシュには何の役にも立ちません。低速（モバイル）システムでは、画像よりもさらに高速にレンダリングされるため、CSSを使用することをお勧めします。アクセシビリティにとって、静止画像の代わりにCSSを使用することも重要ですが、主な取り組みは、読み込みと処理の両方でこれが高速になることです。

Answer 2

考えられる唯一の違いは、ブラウザが画像を取得するのにかかる時間です。それに比べて、レンダリング時間はごくわずかです。

テストするときは、画像がブラウザのキャッシュからではなく、リモートでフェッチされていることを確認してください。リモートでフェッチすると、画像オプションの速度が大幅に低下すると予測しています。