2

数百の小さな画像を含む Web アプリケーションを使用しており、ロード時のパフォーマンスが非常に悪いです。

これに対抗するために、ブラウザに静的ファイルをキャッシュしたいと思います。

Tomcat 7 でサーブレット フィルターを使用して、静的ファイルに有効期限ヘッダーを正しく設定し、これが Chrome に返されることを確認できます。

Accept-Ranges:bytes
Cache-Control:max-age=3600
Content-Length:40284
Content-Type:text/css
Date:Sat, 14 Apr 2012 09:37:04 GMT
ETag:W/"40284-1333964814000"
**Expires:Sat, 14 Apr 2012 10:37:05 GMT**
Last-Modified:Mon, 09 Apr 2012 09:46:54 GMT
Server:Apache-Coyote/1.1

ただし、Chrome はリロード時に静的リソースごとにサーバーへのラウンド トリップをまだ行っており、if-modified ヘッダーを送信し、Tomcat から正しい 304 Not Modified 応答を取得していることに気付きました。

有効期限が本当に過ぎるまで、Chrome がサーバーへのこれらの 100 以上のリクエストを回避する方法はありますか?

4

3 に答える 3

9

ページを読み込むには 3 つの方法があります -

  1. URL をアドレス バーに入力して Enter キーを押すと、ハイパー リンクから移動するのと同じになります (デフォルトのブラウジング動作)。これは Expires ヘッダーを尊重し、最初に静的コンテンツのキャッシュが有効であることを確認します。次に、Expires ヘッダーの時間が将来の場合はキャッシュから直接ロードします。この場合、ブラウザはサーバーに対してまったくリクエストを行いません。キャッシュされたコンテンツが無効な場合、サーバーにリクエストが送信されます。

  2. f5 を押してページを更新します。これは基本的に if-modified ヘッダーをサーバーに送信し、コンテンツが変更されたかどうかを確認します。変更された場合は 200 応答が返され、そうでない場合は 304 応答が返されます。どちらの場合も、サーバーから応答を受信するまで画像はページにロードされません。

  3. ctrl+f5 を押すと、すべてのキャッシュが強制的にクリアされ、すべての画像がリロードされます。画像が変更されたかどうか、またはヘッダーを使用していないかどうかを確認するのに時間はかかりません。

あなたが期待している動作は最初の種類だと思います。あなたが見るべき唯一のものは、あなたがページをロードしている方法です. 通常、ユーザーは f5 や ctrl+f5 を押すことはないため、静的コンテンツが毎回再検証されることはありません。強制的にキャッシュをクリアし、ページ上のすべての静的アイテムをリロードします。

要するに覚えておいてください - 代わりにアドレスバーでEnterキーを押してページをリロードしてください。ブラウザーは、提供されたヘッダーを尊重します。これはクロムに固有のものではなく、W3C 標準です。

于 2013-01-22T18:45:48.470 に答える
2

テストするときは注意してください。Chrome バージョン 20 で F5 キーを押してページをリロードすると、ネットワーク パネルに新しいリクエストが表示されることに気付きました。カーソルをタイトル バーの現在のページ URL の後に置いて Enter キーを押すと、ヘッダーがキャッシュに設定されているキャッシュからリソースが取得されます。

また、良い読書：

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

于 2012-08-07T15:11:55.200 に答える
0

既に提案されているさまざまな落とし穴を除外したと仮定すると、Google Chrome は Cache-Control ディレクティブが含まれていない限り無視でき、public最初になければならないことがわかりました。例えば：

Cache-Control: public, max-age=3600

私の実験では、サーバーの応答から ETag も削除したため、それが要因である可能性がありますが、戻って確認することはしませんでした。

于 2014-07-31T15:42:10.147 に答える