5

Apacheサーバーでホストされているicons.pngという名前のPNGファイルがあります。基本的に、このファイルは他の小さな画像要素 ( CSS スプライト) の組み合わせです。このファイルは、ページが初めて読み込まれるときに、通常の200 OK応答で読み込まれます。

ページが読み込まれた後。カスタムツールチップがトリガーされるリンクがいくつかあります。このツールチップには、icons.pngファイルの画像の一部が、いくつかの HTML 要素の背景画像として表示されます。

たとえば、HTML コードは次のようになります。

jQuery(".profile").tipTip({delay: 200, defaultPosition: "top", content: "<a href='#' style='width: 32px; height: 32px; display: block; 背景: url(images/icons.png) no-repeat -200px -64px'></a>"});

[ icons.pngが参照されているHTML ファイルの他の場所がいくつかあります]

リンクにカーソルを合わせるたびに、ツールチップが表示されますが、同時にブラウザーは、 icons.pngファイルの HTTP 要求をサーバーに送信しています。そして、サーバーからの応答コードは304 Not Modifiedとして来ています。

ファイルのコンテンツはフェッチされていませんが、ヘッダーを送信するオーバーヘッド (約 166 バイト) が毎回存在するため、1.5 秒の遅延が発生しています(私は非常に遅い接続を使用しています)。この 1.5 秒間、ツールチップ要素には背景画像がなく、突然画像がどこからともなく表示されます。

ここにいくつかのスクリーンショットがあります

  • Chrome ネットワーク パネル:

クロム

  • Firebug ネットパネル:

ファイアフォックス

  • HTTP ヘッダー:

ヘッダー

私が知る限り、リソースがフェッチされると、ブラウザはそれをキャッシュに保持し、サーバーに複数回リクエストするのではなく、必要に応じてそこからフェッチする必要があります。

サーバーがコンテンツとともに「 Expires」または「Cache-Control 」ヘッダーを送信していないことがわかりました。これが Chrome のこのような例外的な動作の背後にある理由であるかどうかはわかりません。どんな提案でも大歓迎です。

PS: アプリケーションはHerokuの共有ホスティング環境でホストされています。Ubuntu 12.04 x86_64 で Firefox 15.0 と Chrome バージョン 21.0.1180.89 を使用しています。

4

2 に答える 2

2

要素を初めて表示するたびに、関連する背景画像がダウンロードされます...少なくとも最新のブラウザーでは。

複数のリクエストは、新しいツールチップにカーソルを合わせて表示し、画像を呼び出すよう促したためである可能性があります。

あなたの本能は正しいですが、問題は、キャッシュヘッダーの構成がサーバー上で直接行われていない場合、または .htaccess ファイルを介して行われていない場合、新しいバージョンをダウンロードする必要があるかどうかを確認するために http 要求でサーバーに要求し続けることです。か否か。mod_expires で設定できる「expires」ヘッダーを整理するとすぐに、ローカルで要求されたバージョンのファイルが毎回返され始めます。

ソース: http://httpd.apache.org/docs/2.2/mod/mod_expires.html

于 2013-03-05T11:21:53.203 に答える
1

最近、ローカルで開発しているときに、この動作にも遭遇しました。スプライト バックグラウンドを持つ要素には:hover、CSS ファイル内に状態がありました。これは、異なる背景位置を持つ同じスプライト バックグラウンド イメージを指し示し、要素のバックグラウンドを切り替えるときに非常に小さいながらも顕著な遅延を引き起こしました。

.class {
    background: transparent url('sprite.png') 0 0 scroll;
}

.class:hover {
    background: transparent url('sprite.png') -50px 0 scroll;
}

これが起こらないようにする 1 つの方法は、単純にbackground-positionCSS プロパティのみを使用することです。

.class {
    background: transparent url('sprite.png') 0 0 scroll;
}

.class:hover {
    background-position: -50px 0;
}

もちろん、キャッシュ制御は引き続き必要です。このコーディング方法により、頭の痛い問題を解決できます。

于 2014-04-23T08:26:21.907 に答える