測定画像HTTPリクエスト

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。

1. 画像を非表示にする
<img src="1.jpg" style="display: none" />テスト: test_1.html
結論: Opera のみがリクエストを生成しません。
注意: visibility: hidden で画像を非表示にすると、Opera でもリクエストが生成されます。

2. 画像を繰り返す
<img src="1.jpg" /><img src="1.jpg" />テスト: test_2.html
結論: すべてのブラウザは 1 つのリクエストのみを実行します。

3. 背景の繰り返し
<style type="text/css"> .test1 { 背景: url(1.jpg) } .test2 { 背景: url(1.jpg) }</style><div class="test1">test1</div><div class="test2">test2</div>テスト: test_3.html
結論: すべてのブラウザは 1 つのリクエストのみを実行します。

4. 存在しない要素の背景
<style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(2.jpg) } /* ページ内にクラス test2 の要素はありません */</style><div class="test1">test1</div>Test: test_4.html
結論: 背景は、適用された要素がページ上に存在する場合にのみリクエストを生成します。これは CSS フレームワークには意味があります。

5. 要素の背景を非表示にする
<style type="text/css"> .test1 { background: url(1.jpg); display: none; } .test2 { background: url(2.jpg); visibility: hidden; }</style><div class="test1">test1</div>テスト: test_5.html
結論: Opera と Firefox は、display: none で非表示にされた要素の背景に対して HTTP リクエストを生成しません。背景画像は、これらの要素が display: none でない場合にのみ要求されます。

6. 複数の背景
<style type="text/css"> .test1 { 背景: url(1.jpg); } .test1 { 背景: url(2.jpg); }</style><div class="test1">test1</div>テスト: test_6.html
結論: Webkit レンダリング エンジンに基づく Safari と Chrome を除き、他のブラウザーは 1 つの背景画像のみを要求します。
注: WebKit ブラウザは CSS3 で複数の背景画像をサポートしているため、すべての背景画像を要求します。

7. ホバーバックグラウンド読み込み
<style type="text/css"> a.test1 { background: url(1.jpg); } a.test1:hover { background: url(2.jpg); }</style><a href="#" class="test1">test1</a>テスト: test_7.html
結論: ホバーがトリガーされると、ホバー状態の背景が要求されます。ちらつきの原因となるため、同じ背景画像内に配置し、反転させることが多いです。
注意: 画像のキャッシュがない場合、IE はホバー状態が変わるたびに新しいリクエストを生成します。とても悪いです。
2009-05-13 夕方に追記: 上記の説明は誤りです。より詳しい説明は続編を参照してください。反転テクニックはスプライト テクノロジを参照します (例: test_7b.html)。これにより、IE6 でちらつきは発生しません。

8. JS の innerHTML 内の画像
<script type="text/javascript"> var el = document.createElement('div'); el.innerHTML = '<img src="1.jpg" />'; //document.body.appendChild(el); </script> テスト: test_8.html
結論: Opera だけがすぐに画像を要求しません。
注意: Opera は、リクエストが DOM ツリーに追加された場合にのみリクエストを送信します。

9. 画像のプリロード
最も一般的に使用されるのは JS ソリューションです。

コードをコピー
コードは次のとおりです。

<script type="text/javascript"> new Image().src = '1.jpg'; new Image().src = '2.jpg';</script> JS がサポートされていない環境では、hidden 要素を使用してプリロードできます。
<img src="1.jpg" style="visibility: hidden; height: 0; width: 0" />テスト: test_9.html

最後にまとめ

1. Opera は、非表示要素の非表示画像や背景のリクエストを生成しません。
2. Firefox は、非表示の要素の背景に対するリクエストも生成しません。
3. Opera は、DOM ツリーにまだ挿入されていない img 要素に対するリクエストを生成しません。
4. Webkit エンジンをベースにした Safari と Chrome は複数の背景画像をサポートします。
5. その他のシナリオでは、すべての主要ブラウザは一貫性を保ちます。
画像リクエストの処理に関しては、Opera が最先端にあると個人的には思います。

余分な

1. Fiddler を使用して Opera を監視する場合、それがローカル サーバーである場合は、Opera のプロキシ サーバー設定でローカル サーバーを確認する必要があります。

2. HTTP リクエストの数を確認するもう 1 つの確実な方法は、Apache access.log ファイルを直接確認することです。

3. Firefox が、繰り返し画像と繰り返し背景に対して重複したリクエストを生成します。すべての拡張機能を無効にしましたが、問題は依然として存在します。詳細を知っている方がいらっしゃいましたら、お知らせください。

<<:  Linux で Ceph 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

>>:  Uniapp は DingTalk スキャンコード ログイン サンプル コードを実装します

推薦する

JavaScript を学ぶときに知っておくべき 3 つのヒント

目次1. 魔法の拡張演算子1. 配列をコピーする2. 配列を結合する3. オブジェクトを展開する2....

vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...

jQueryの競合問題を解決する方法

フロントエンド開発において、$ は jQuery の関数です。$ のパラメータが異なると、実装される...

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

超詳細なMySQL使用仕様の共有

最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...

HTMLチェックボックス説明テキストをクリックして状態を選択/チェック解除します

Web 開発では、チェックボックスは小さく、ユーザーにとって操作があまり便利ではないため、ユーザーが...

CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

ネイティブ JavaScript メッセージボード

この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介し...

Nginx ソースコードのコンパイルとインストールのプロセス記録

rpm パッケージのインストールは比較的簡単なので、ここでは説明しません。ほとんどのオープンソース ...

トップナビゲーションバー機能を実現するCSS+HTML

ナビゲーション バー、固定トップ ナビゲーション バー、およびセカンダリ メニューの実装効果図の実装...

MySQL テーブルの追加、削除、変更、クエリの基本チュートリアル

1. 作成する [テーブル名] (フィールド1、フィールド2、...) 値 (値1、値2、...) ...

CSS 属性値正規マッチングセレクターの使い方 (ヒント)

属性値の正規一致セレクターには 3 つの種類があります。 [属性^="値"] [...

img 画像タグに alt 属性を付与する必要がありますか?

img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...