これら2つのオプションの間でブラウザの読み込み時間にどちらが良いか知っている人はいますか?
background-image:url('1by1px.png');
また
background-image:url('10by10px.png');
div に対して繰り返される 1 ピクセル x 1 ピクセルの半透明の png。または、10px x 10px の大きなサイズです。
ブラウザで繰り返される画像を表示するには、ある種のループが必要です。そのため1px by 1px、画像が表示されるために多くのループが発生するかどうか疑問に思いました。ループの少ない立体画像？
もちろん、10by10 に比べて 1by1 の方が画像サイズが小さいという反論がありますが、小さい方が良いという意味ではありません。なぜなら、何度もループすると、大きな画像サイズをわずかに少ない頻度でループするほどにはスケーリングされない可能性があるからです。
どちらが優れているか、ブラウザがこのような状況をどのように処理するかについて、もっと知っている人はいますか?
背景画像を繰り返さない場合、レンダリングに必要な時間は、元の画像ではなく、最終的にスケーリングされた画像のみに依存します。
ファイル内の画像は PNG 形式で圧縮されていますが、ブラウザで読み込んだ後は RGBA ビットマップ形式 (1 ピクセルが 4 バイト) になります。バックグラウンドを繰り返す場合 (Intel x86 など)、ブラウザーのネイティブ コードはREP MOVSDを使用してビットマップ データを RAM からビデオ メモリに移動します (これは標準的なシーケンスであり、グラフィックス ドライバーまたは特定の GPU のさまざまな実装で異なる場合があります)。 ）。
背景を含む HTML DIV のサイズが 100x100 であると仮定します。
1 ピクセルのみの画像の場合: ブラウザー プログラムは10,000 の 'REP MOVSD'命令を実行する必要があります。
10x10 画像の場合: 画像が繰り返されるたびに、ブラウザ プログラムは 'REP MOVSD' を 10 回だけ実行する必要があります ('REP MOVSD' を 1 回呼び出すと、画像の 1 ピクセル ライン (ピクセル行) をレンダリングできます)。したがって、この場合、実行される 'REP MOVSD' 命令の数は 10x100 回 (1 つの画像で 10 回、100 の繰り返される画像) になります。これには合計1,000 の 'REP MOVSD'が必要です。
したがって、大きな画像に基づく最終的な背景は、より高速にレンダリングされます。
その他の注意: 上記の説明は、10x10 の画像のパフォーマンスがちょうど 10 倍優れているという意味ではありません。「REP MOVSD」(たとえば、CX=9999 の場合) は 1 つの CPU 命令にすぎませんが、データ バスを介して転送するには 9999x4 バイトが必要です。9999 の単純な「MOV」を使用する場合、その多くのデータがまだデータ バスを通過する必要がありますが、CPU はさらに 9998 命令を実行する必要があります。より巧妙なブラウザーは、複製された画像を使用して、背景用に事前にレンダリングされたビットマップを作成します。そのため、ビデオ メモリに転送する必要があるたびに、10,000 または 1,000 ではなく、100 の 'REP MOVSD' (100 は上記で想定した最終的な背景のピクセル行の数) だけが必要です。