3

タグの高さと幅の値を設定して<img>レンダリングを高速化するのが一般的なベスト プラクティスですが、なぜそうなるのでしょうか?

4

2 に答える 2

4

幅と高さを指定すると、ブラウザーは画像をダウンロードする前にそのスペースを保持し、以下の html の解析を続行できるためです。次に、イメージがダウンロードされると、そのスペースがいっぱいになります。

そうしないと、ブラウザはどのくらいのスペースを確保する必要があるかを事前に認識できません。次に、画像をダウンロードするときに、画像の下にある html 要素を移動する必要があります。

于 2013-08-10T01:45:21.177 に答える
1

すべての画像の幅と高さを指定すると、不要なリフローや再描画が不要になり、レンダリングが高速になります。

ブラウザーがページをレイアウトするとき、画像などの置き換え可能な要素をフローできる必要があります。画像がダウンロードされる前でも、置換不可能な要素をラップするサイズを知っていれば、ページのレンダリングを開始できます。含まれるドキュメントで寸法が指定されていない場合、または指定された寸法が実際の画像の寸法と一致しない場合、ブラウザは画像のダウンロード後にリフローと再描画を要求します。リフローを防ぐには、HTML タグまたは CSS ですべての画像の幅と高さを指定します。

ソース

于 2013-08-10T01:47:31.080 に答える