基本的にスクロールをアニメーション化するスクロールプラグインを使用しているサイトを構築しています。サイトにいくつかの画像を挿入した場合、スクロール/アニメーション時に非常に不安定に見えるため、パフォーマンスについて非常に懸念しています。
画像で検出できる主な問題は、画像の寸法が正しくないためにスケーリングされる場合のリフロー/再描画の問題です (これに対処する必要があり、ベストプラクティスについて知っています)。
このステートメントを念頭に置いて (画像はスケーリングされます)。パフォーマンスに関しては、画像要素またはそれらの画像を背景として使用する div のどちらが良いでしょうか?
この jsFiddles を作成しました。これは、Chrome ブラウザのメモリ ツールで、背景画像オプションが使用するメモリが少ないことを示しています。
<img />: http://jsfiddle.net/ek6Xn/
<img src="..." />
background-image: http://jsfiddle.net/ek6Xn/1/
<div></div>
div {
background:url(...);
background-size:100% 100%;
}
参考文献: