4

幅と高さの属性を指定しないと、それを知るようになりました。画像タグでは、パフォーマンスの問題が発生します。幅と高さをパーセンテージで設定するdiv要素があります。また、同じdivには、140px*140pxなどの固定サイズの背景画像があります。ここで、パフォーマンスの問題はありますか？

マークアップの例：

<div style="width:50%;background:url('imgofsize140*140') no-repeat">&nbsp;</div>

ありがとう

4

8 に答える 8

5

これは画一的なケースではないため、ケースバイケースで検討する必要があります。

ユーザーのインターネット接続速度、画像サイズ、コンピューターの機能など、覚えておかなければならない変数がたくさんあります。

この質問に多少関連する SO に関するいくつかの質問を見つけました。有益だと思うので、それらを含めます。私は絶対に正しいと主張しているわけではありません。

BGIMG対IMG

パフォーマンス引数

私の知る限り、ブラウザーは画像が DIV にあるか IMG にあるかにかかわらず、同じように画像をキャッシュします。いずれにせよ、これは、特定のパフォーマンスが各レンダリング エンジン (およびおそらくそれらを中心に構築されたブラウザー) 内部の実装の詳細として定義されるケースの 1 つだと思います。そのため、デザイナー/開発者としての私たちの管理外であり、ブラウザーごと、バージョンごとに変更される可能性があります。言い換えれば、私はそれについてあまり時間を費やすことはありません。

環境

技術的な違い はい、最も顕著なのは、IMG タグの幅/高さを設定でき、画像を引き伸ばすことができることです。これは状況によっては便利です。

ただし、心に留めておかなければならない主なことは、HTML ドキュメント内の画像のコンテキストです。ギャラリーの画像など、画像がコンテンツの場合は、IMG タグを使用します。インターフェイスの一部にすぎない場合は、代わりに div を使用できます。- ポール著

そして、それに対する反応も同様に重要です。

そうは言っても、セマンティックの違いについて優れた点を指摘しています。画像がページのコンテンツの重要な部分である場合は通常、IMG がより適切な選択であり、画像が単に装飾的または書式設定用である場合は通常、CSS 手法が好まれます。

これはパフォーマンスに直接関係するものではありません - セマンティクスとアクセシビリティについての詳細。By - Mr. W.

それから、あなたの質問に直接関係していると思われる SO のパフォーマンス OFF についてもう 1 つ。

ページ負荷テスト

背景画像付きのバージョンでは、実際には .0225 秒後に「ドキュメントの完了」が表示されましたが、完全に読み込まれたページの読み込み時間は、インライン画像バージョンとほぼ同じでした. すべての背景画像を使用すると、$.document(ready) の起動が速くなりますか? 背景画像は、要素 (div、span などを含む) が利用可能になった後にのみダウンロードされることが判明しました。これにより、イメージを取得するために必要なすべてのラウンド トリップがブロックされなくなります。

結果: インライン画像テスト ページ

結果

結果: 背景画像のテスト ページ

BGの結果

于 2013-06-26T13:27:26.230 に答える
4

img タグで高さと幅を指定しないのと同じようにパフォーマンスの問題があるとは思いません。これは、ブラウザーがページ全体を再描画することを強制し、そこにパフォーマンスの問題があるためです。

http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

于 2011-12-01T10:50:43.430 に答える
2

tl;dr

パフォーマンスが低下することはありません (他のケースでも非常に小さい)。

詳細:

幅と高さを指定しないことによるパフォーマンスの「ペナルティ」については (Google で働いていない限り) 気にする必要はありませんが、レイアウトのちらつきについては気にする必要があります。

幅と高さを指定しないと、ブラウザーは最初のボックスを表示します。これは、画像がどのくらいのスペースを占めるかを事前に知らないためです。画像が読み込まれた後、リフローが行われます。つまり、サイズ変更によって影響を受けるいくつかの要素のレイアウト。しかし、これは実際には非常に速く発生します (そして、おそらく他の多くの場所でリフローを引き起こしているでしょう)。

背景画像のリフローは不要です。

于 2011-12-01T10:51:31.073 に答える
1

これがパフォーマンスに影響するとは思わない。

背景画像を 1 つの画像に結合し、必要に応じて配置すると、複数の画像ではなく 1 つの画像のみを読み込むため、パフォーマンスが向上します。

于 2011-12-01T10:51:33.063 に答える
1

ブラウザによって異なります。今日、絶対位置の背景画像でスクロールすると、Chrome が現在キャンバスを再描画することを知りました。Firefoxはそれをうまく処理します。これは、今後の Chrome リリースで修正される予定です。

于 2013-06-25T03:06:21.400 に答える
0

画像がすでに指定したサイズになっている場合は、属性で高さと幅を指定する必要はありません。また、背景画像を使用してもパフォーマンスの問題はありません。

于 2013-07-01T17:00:18.773 に答える