質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

javascriptで、キャッシュを再実行させたい。どうすればよいですか?

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,813

AtaruOgura

score 4

さっき質問して、はやとちり。解決したと思ったら、していませんでした。そこで、
もう一度質問させてください。

質問は:
javascriptで、reload()すると、サーバーに読みにいきますが、
サーバーに読みにいかずに、キャッシュを再実行させたいときは、
どうすればよいのでしょうか? なにか関数がありますか?
location.reload(false)でできるはずですが、わたしのところ
では、サーバーに読みにいってしまいます。ブラウザはchrome。
どなたか、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/03 04:48

    「できるはず」はどこかにかいてありましたか?URLか書誌情報を質問文に追記ください。

    キャンセル

  • unau

    2017/09/03 06:00

    「キャッシュを再実行の意味がわかりません。「キャッシュ」は一度計算したもの、一度持ってきたものを、(最新版との不整合のリスクをかかえつつも、) 時間短縮のために結果だけ保存しておく記憶領域のことです。キャッシュからは「取り出す」ことはできますが、キャッシュを実行することはできません、普通。ページ全体のリロードをキャッシュから行いたいと理解でよいのでしょうか。

    キャンセル

  • kei344

    2017/09/05 07:03

    ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。unauさんのへのコメントの内容を含め質問に追記されてはいかがでしょうか。

    キャンセル

回答 1

+3

キャッシュとは、一般的に、結果を得る (計算する、どこからかもらってくる) のに時間がかかる場合に、最新版との不整合のリスクをかかえつつも、時間短縮のために結果だけ保存しておく記憶領域、およびそこに格納した結果のことです。

ブラウザにおけるキャッシュとは、ページ (html) や画像、スタイルシートやスクリプトなど、一回取ってきたものを、再表示を速くするために保存しておくものです。
location.reload(false) は、「現在のページをキャッシュからリロードするよ」というものですが、キャッシュの中に必要なものがなければ、当然、サーバまで取りにいかなければなりません。すなわち、「現在のページをキャッシュにあるものはキャッシュから、ないものはサーバにもう一度取りにいってリロードするよ」という意味です。ですので、キャッシュにデータがない場合は location.reload() と同等の動作になります。

で、前述したように、キャッシュのメリットは時間短縮 (計算コスト・通信コストの削減) ですが、デメリットは最新データとの乖離とキャッシュエリアの消費 (メモリやストレージのコスト) です。このバランスを取るために、キャッシュの設定はクライアント (すなわちブラウザ) でもサーバでも行えます。このキャッシュの設定いかんによっては、常にキャッシュされないページがありえます。

たとえば、クライアント側で「常にキャッシュしない」という設定になっていれば、当然、一切キャッシュされません。キャッシュ領域のサイズが極端に小さければほとんどキャッシュされないでしょう。

もっとあり得るのは、サーバ側が「キャッシュしないでよ」と指定してコンテンツを返してくることです。情報が刻々と変化していて、常に最新版を取りにきてもらわないと困る場合などです。この指定を受けた場合、クライアントはキャッシュを保存しません。
サーバ側からどんなキャッシュコントロールができるのか、については、次の記事などを見るとよいかと思います。

-キャッシュについて整理してみた - Qiita
-ブラウザのキャッシュコントロールを正しく理解する - Qiita

と、前置きが長くなりましたが、キャッシュされているかどうかの確認はできていますか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/03 08:47


    このコメント欄に記入するのは初めてで、記入要領がよくわかっていません。ヘンな書き方をお許しください。
    kei344さん、ありがとう。
    Qiitaで、 JavaScript 現在のページをリロードしたいhttp://qiita.com/39_isao/items/1c26314d1dae8be539a5にありました。

    unauさん。丁寧にありがとうございます。
    一回ページを開けたあと、ブラウザchromeの←で前のページに戻り、前のページの→すると、
    さっき開けたページがすごく手早く開きます。それでキャッシュしていると思っておりました。
    そのページは、javascriptでアニメ的に描画するもので、サーバーに再読み込みすると、描画に必要なパラメータとして別の値が与えられるので、異なった絵が描かれてしまうのです。
    Quiitaには、Cache-Controlヘッダは仕様通り実装されていない?(http://qiita.com/shibukawa/items/bdf56e0adbc292666cfb)というのもありまして、
    HTMLのヘッダーでキャッシュを使う使わないをコントロールできるかどうかは、疑いがあるということのようですので、これを避けたいのです。そこで、ペ―ジにボタンを置いて、それを押せば、同じアニメを再描画したいと思ったのでした。onClick="location.reload(false)" では、私のchromeではonClick="location.reload(true)"と同じ動作でして、あーあ、やれ困っちゃったなぁ、という状況です。
    ブラウザのbackボタンでもどり、そのページからフォワードすれば、同じアニメ動作がしますので、それと同じことをjavascriptの関数で欲しいと思った次第です。古籏さんのjs逆引きハンドブックや山田さんのjs逆引きレシピでも見つけられておりません。代案として、アニメする部分はjsの自作関数で記述しているので、そのjsの自作関数を呼び出してみたのですが、これも半分しか動作しません。半分というのは、背景画像は描いてくれるが、そこから別の自作関数を呼び出して本図は描けないのです。(この関数は、最初のページ表示の時には全く支障なく本図も描きますので、動作上のバグはないと思います。その関数で使っているグローバル変数を読めないのかと疑って点検してみましたが、症状は直りませんでした)問題を拡散させても仕方がないので、javscriptのonClick="location.reload(false)"みたいな簡単な記述でできる方法がないのかという観点に未練があります。ご教示いただければ、ありがたいです。お手数かけて申し訳ありません。

    キャンセル

  • 2017/09/03 09:07

    このあたりの事情も、背景情報として、もとの質問に書いておいたほうがよかったでしょうね。
    言及されていますが、ご自身で作っている WEB アプリであれば、自作の js をきちんと動作する方向がいいと思います。というのも、location.reload() の使用でどうにかなったとしても、それではブラウザ依存の対処法となってしまい、検証もたいへんですし、ブラウザのバージョンアップできちんと動作しなくなってしまうかもしれませんし。
    そもそもアニメの再描画が目的であれば、もしかしたらメモリにないかもしれないデータをキャッシュから拾うより、適切な js を使ってメモリ上で処理したほうが、まっとうだし速いかもしれません (少なくとも遅くはならないはず)。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる