2016-02-13 7 views
8

私はRuby on Railsでアプリケーションを最適化しようとしていますが、アプリケーションの画像は読み込みに時間がかかりますが、 Google Chromeは画像をキャッシュしていません。Google Chromeは画像をキャッシュしていません

これは、Google Developers Consoleでは、画像が本当に読み込まれる前にキャンセルされた画像をGoogle Chromeが読み込むように要求するためです。

これは、Google Developers Consoleを開き、最初にページを更新し、最初のリクエスト内でイメージのものを表示できますが、すぐに取り消されます。

google_not_caching

その後、あなたは実際に画像をロードリクエストを見ることができます。

enter image description here

私はレスポンスヘッダにあなたがCache Controlmax-age = 31536...

response_header

publicに設定されていることを見ることができれば、なぜこの出来事は、私は私の中に画像を入れて理解していませんこのようにアプリケーション:

<div class="col-xs-3"><%= image_tag "#{@hero.id}/ability_1.png", class: "center-block"%></div> 

画像はフォルダ内に整理されていますapp/assets/images

これを修正するRoRの方法はありますか?

:Windowsで私のアプリをテストしています(実際にはGoogle Chromeが画像をキャッシュすることがありましたが、時代の50%のように見えます)。開発は一度は機能しませんでした)、最初に画像がロードされている間にFirefoxが最初に読み込まれましたが、同じビューを読み込んだ後にリロードに気づくこともできません。 ? Google Chromeが変わったのは普通ですか?

答えて

8

最も重要なことに最大エージングを設定し、ブラウザのキャッシングを分析するときに実現するのが「ステータスコード」です。あなたの例では、 "Not Modified"の略である "304"が表示されます。これは、ブラウザが "キャッシュを潜在的に使用できる"ことを意味します。あなたは実際にキャッシュしています。キャッシング!=あなたのウェブサーバーに当たらない。 Mozillaに従って

定義:

これは、キャッシング目的のために使用されます。応答が変更されていないことをクライアントに伝えています。したがって、クライアントは同じキャッシュバージョンの応答を引き続き使用できます。

あなたのWebサーバーにetagとlast-modifiedを送信すると、Webサーバーはそれらのメタを見て「いいえ、このファイルは変更されていないので、キャッシュを使用してください」と言うそれでおしまい。実際にはファイルを再送信しません。 「サイズ」は、Webサーバーがファイルを送信している「200」のステータスコードであり、タイミングがずっと短くなっているはずです。

Chromeでは、[ネットワーク]タブの[キャッシュを無効にする]オプションをオンにすることで強制的に非キャッシュにすることができます。

希望に役立ちます!

+1

+1 304の明確な説明のために、これは実際にOPの基本的な問題に対処しているとは思わない:キャッシュコントロールの 'max-age'設定を条件として、Chromeは条件付きGET要求をまったくしないのはなぜですか? 'レスポンスヘッダ? – eaj

1

Chromeは画像キャッシングの処理方法が異なるようです。どのタイプのリロードをしていますか?(リンクに続いて、アドレスバーのEnterキーを押す、Ctrl + r)それはあなたが検索バーに入力したキーを押すと、それは最大エージングを尊重するように見えますが、あなたが使用している場合はCtrl + R Chromeは0

expires_in max-age cache control doesn't work

Chrome doesn't cache images/js/css

2

マニフェストファイルを使用して強制的にキャッシュすることができます。このトピックについてのウェブ上にはたくさんのドキュメントがあります。ここにはスターターがあります:http://www.w3schools.com/html/html5_app_cache.asp

1

リクエストヘッダーにはmax-age = 0が含まれています。それを大きな数字に設定してみてください!

関連する問題