キャッシュが無効になっているにもかかわらず、サーバーがコードファイルの変更を無視するのはなぜですか?


14

ローカルホスト(Windows 7、Chrome v79.0.3945.130(64ビット))でhtml / jsコードをテストしましたが、コード変更の約50%がブラウザーに反映されていません(開発ツール/ソースで確認しました) )。
インターネットにはたくさんのアドバイスがありますが、どちらもうまくいかないようです:

  • リロードを右クリックして、「キャッシュを空にしてハードリロード」を選択します-30%の場合は役に立ちません。
  • Chrome開発ツールの[ネットワーク]タブでキャッシュを無効にする-役に立ちません。
  • <meta http-equiv="Cache-control" content="no-cache">ヘッダーに追加-助けにはなりません。
  • 交換する<script src="common.js"></script>ことにより、<script src="common.js?blabla"></script>-例60%に役立ちますが、すべての変更は、巨大な雑用になった後、あなたはそれを行う必要があります。また、htmlの変更には対応していません。
  • ファイルを新しいファイル(index.htmlからindex2.htmlなど)にコピーし、コード内のファイル名を置き換えます-常に機能しますが、さらに面倒です。

コードをgithub.ioにコミットするときに発生するまったく同じ問題

サイトにコードの変更がすぐに反映されるようにしてください。


編集:index3.htmlファイルを作成し、「hello world」のみを配置しました。ブラウザでファイルを開きました。「hello world2」に変更-ブラウザがコンテンツを更新しました。「hello world3」に変更-複数の再ロードと「キャッシュとハードの再ロードを空にする」後でも、ブラウザはまだ「hello world2」を表示していました。私は「hello world4」に変更しました-ブラウザはまだ「hello world2」を示していました。4時間後、私は「hello world5」に変更しました-ブラウザーにはまだ「hello world2」が表示されています。このファイルは、基本的なメモ帳で編集しました。


Edit2:人々は私が使用しているサーバーを尋ね続けます。これは問題の一部のようです。残念ながら、私はそれを確認するために私が正確に何をする必要があるのか​​わかりません。ここに私がこれまでに見つけたすべてがあります:

  • 私が持っているinetpub/wwwroot私は、HTML&JSファイルを配置し、で、ブラウザでindex.htmlを開きディレクトリをhttp://localhost/
  • Devs Toolsの[マイネットワーク]パネルは次のようになります:画像リンク
  • サーバーのセットアップは非常に高速で、追加のソフトウェアをインストールする必要はありませんでした。つまり、node.jsを使用していません。
  • にiisstart.htmがinetpub/wwwrootあり、開くhttp://localhost/iisstart.htmとIIS7と表示されます。

Chrome開発ツールでキャッシュを無効にする+更新する+キャッシュを再度有効にする+更新することで問題が解決することがあります。試してみる価値があるかもしれません...
Nick Parsons

2
どのタイプのサーバーを使用していますか?
Jhecht

@Jhechtどうやってチェックするの?
klm123

1
私が答えで見たものから、あなたはおそらくそれをパラメーターで回避するでしょう。そして、それはおそらくうまくいくでしょう。ただし、通常、Chrome開発ツールでキャッシュを無効にする場合、これは必要ありません。だから私の直感は別のキャッシュが関係していることでしょう。ユーザーとサーバーの間には、任意の数の追加のキャッシュテクノロジーが存在する可能性があります。いくつかの例:サーバーサイドキャッシング(例:Varnish)、CDNキャッシング(例:Cloudflare)、ルーター/ファイアウォールからのローカルプロキシ(例:squid-cache)など。私もそれらをチェックします。
Jey DWork

1
@ klm123これがどのWebサーバーであるかを知らずに、キャッシュ構成を変更または確認する方法を伝えることは不可能です。Webサーバーについてわからない場合は、devToolsのネットワークタブで確認する方法の1つです。ロードさindex.htmlれたの応答ヘッダーで、Webサーバーにヒントを与える可能性のあるX-Powered-ByServerヘッダーなどを確認します。ファイルパスのグーグルinetpub/wwwrootはIISサーバーを強く指します。
アクラン

回答:


6

パラメータの使用は正しい方法です!ここでは、大きな変更でのみ変更するバージョン番号を手動で追加できます。デバッグの場合は、それをDate.time()に設定できます。これにより、<head>タグで、パラメーターが常に新しいため、キャッシュされたすべてのバージョンが強制的に上書きされます。 1:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

お役に立てれば!


できると思います。しかし、それは実質的に私の4番目のオプションと同じではありませんか?ファイル名の後に「?blabla」を追加します。それはあまり頻繁に動作しません-それはソースタブの同じファイル名であるか、blablaが追加されていますが、ファイルの内容はまだ同じです。
klm123

同じではありません。パラメータは二回(Date.timeの(で発生することはありません)が使用されると、それがキャッシュされたバージョンをレンダリングすることblablaはすべてでそれを使用していない二倍のそれを使用した後に同じである。?。
lehm.ro

パラメータは2回使用されません。コードを編集してからパラメーターを変更し、ブラウザーでソースコードを確認すると、古いコードです。
klm123

私のアプローチを試しましたか?
lehm.ro

あなたのアプローチは役に立ちます、ありがとう。しかし、それは私の問題を解決しません。あなたが書いたことは私の状況では真実ではありません。「パラメーターは常に新しいバージョンであるため、キャッシュされたすべてのバージョンを強制的に上書きします」。パラメーターを新しいバージョンに変更しても、キャッシュが確実に再ロードされるわけではありません。また、index.htmlの変更にも役立ちません。
klm123

3

Windows 7で実行されているIIS7 Windowsサーバーでは、コンテンツのキャッシュを防止するために、と呼ばれる構成ファイルの1つに変更を加える必要がありますweb.config。後でIIS 7との構成ファイルは次の場所にあります。%WinDir%\System32\Inetsrv\Config folder場所%WinDir%は、Windowsを(通常はインストールしたフォルダですC:/Windows)。

web.config編集する前にファイルのバックアップコピーを作成して、ファイルに加えた変更によってファイルが破損した場合にロールバックできるようにします。

あなたにはweb.config、ファイル、ちょうどあなたのキャッシュを防ぐために、以下を追加しますindex.html

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

web.configここからファイルのファイルパスを取得:Windows Doc:Configuration Reference

上記のキャッシュの構成をここから取得しました:IIS経由で提供される単一ページアプリケーションのHTMLファイルのキャッシュを無効にする方法は?


上記のパスにweb.configがありません。私はそれを作成し、あなたのコードをそこに置きました。しかし、私はindex.htmlをのようなフルパスに置き換える必要がありました。これprojectName/index.htmlは、ブラウザのurlからコピーしhttp:/localhost/projectName/index.htmlます。結果-キャッシングの問題には影響しません。
klm123

@ kim123代わりweb.configに、サイトのルートフォルダー(サイトのあるフォルダー)にファイルを追加して、パスをjustに戻しindex.html、それが機能するかどうかを確認できますか?
AndrewL64

やった。それは役に立たない。
klm123

1

私は同じ問題を抱えていましたが、これは私のチェックリストです:

  1. web.config(キャッシュとclientcache、カーネルキャッシュポリシーなど)または.htaccess(ヘッダーセットCache-Control)を確認してください
  2. ASP、PHPなどの動的言語を使用した場合、内部キャッシュ設定がある可能性があります。あるケースでは<%Response.Expires=1440%>、ASPコードの多くの行の中で見つかり、他のすべての設定を克服していました。PHP session_cache_expireでは同じことができます。
  3. IISを使用している場合は、サーバー > HTTP応答ヘッダーをチェックして、サーバー名の下にリストされている個々のWebサイトについても同じことがキャッシュされていないことを確認します。
  4. http-equiv="Cache-control"HTMLヘッダーをチェックインします(このテストに合格しました!)。

最後に、上記のすべての状況で、Chromeコンソールの[ 新機能 ]タブの[ キャッシュ無効にする ]をオンにすると、常に新しいバージョンのページを表示できるようになりましたが、これはデバッグ目的でのみ有効であり、訪問者はそれを行いません。


1. web.configと.htaccessはどこにありますか?2. htmlとjsのみを使用しています。3. HTTP応答ヘッダーは次のようになります。imgur.com
klm123

IISを使用している場合、web.congfigはルートまたはwwwrootにあります。また、サーバーレベルにはMachine.configファイルがあり、IISコンソールから直接変更できます。ここでは、stackoverflow.com / questions / 2325473 / where-is-machine-configから直接変更できます。WindowsでApacheサーバーを使用している場合は、Windowsを検索して.htaccess @ klm123を見つけてください
Ali Sheikhpour

0

Google Chromeを使用する特定のケースでは、次のことを試してください。DevToolsを開き、[ネットワーク]タブに移動します。[キャッシュを無効にする]チェックボックスをオンにして、ページを更新します。

注:これが機能するためには、Dev Toolsウィンドウが常に開いている必要があります。

ここに画像の説明を入力してください

ただし、ページをハードリフレッシュすることなくユーザーに変更を伝達するには、頻繁に変更されるファイルの(参照したとおりに)各参照ファイルの最後にファイルバージョンを追加する必要があります。例えば:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

v=20b379f72a37末尾に追加は、ファイルの内容の自動生成されたファイルのハッシュです。


それは私のリストの項目2です。
klm123

開発ツールウィンドウを開いたままにしますか?
マーティンShishkov

開発ツールウィンドウが開いており、チェックボックスがオンになっています(ただし、通常は[ソース]タブを確認します)。ハードリフレッシュも行います。
klm123

0

これはロングショットですが、どのようなエディター/ IDEを使用していますか?また、index.htmlに対してどのような編集を行っていますか?

ファイルを保存してロードしようとしたときに反映されないそのような編集の例をいくつか教えていただけますか?

問題の再現を試みたいのですが。人々が示唆していることから、問題はコード自体の中にあるようには見えません。それは環境問題だと思いますが、私の疑いを確認するには、あなたからより多くの情報が必要です。


マイクロソフトのビジュアルスタジオコードを使用しています。例:<script src = "common.js"> </ script>を<script src = "common.js?blabla">に置き換えます。例2:新しいボタンの追加、新しいdivの追加、onload関数呼び出しの追加。Tbhそれはあらゆる種類の編集のように見えます。
klm123

質問の投稿の最後にある編集内容をご覧ください。
klm123

0

HTMLメタで記述するのはブラウザに対する推奨事項であり、厳密な指示ではありません。ブラウザで厳密なキャッシュが有効になっている場合、これは役に立ちません。

ソリューションはよく説明されています:https : //curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

サーバー側では、ファイル自体の最終更新日を含むバージョンをスクリプトに追加することを好みます。

<script src="/myScript.js?v=1579780745150"></script>

1579780745150がUnixの場合、タイムスタンプはmyScript.jsファイル自体を更新します。独自のファイルでのみ機能しますが、外部のファイルは必要ありません。ほとんどの場合、ファイル名にはバージョンがあります。


バックエンドのコードが必要な場合。使用したプラットフォームを教えてください。
Aleksandr Smityukh

0

これはおそらく本当にイライラさせられ、あなたが何か悪いことをしているようには聞こえません。

問題は、ブラウザと、呼び出しを行っているスクリプトファイルとの間に、何らかのキャッシングを行っていることです。

それが何であるかを判断するために、localhostのURLをどのように参照していますか?

例:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

実行している場合、file://path/to/file.htmlこれはWebサーバー/プロキシを参照していないことを意味します。もしそうならhttp://[something]/file.html、あなたはある種のウェブサーバーを走らせており、それが原因である可能性があります。キャッシュをオフにできるような設定を探します。

Webサーバーを使用しておらず、文字どおりWebサーバーなしでローカルのhtmlファイルを直接参照している場合は、ブラウザが原因であると考えられます。この場合は、Martin Shishkovが提案するように、ブラウザーのキャッシュをオフにすることをお勧めします。


それはだhttp://localhost/ProjectName/index.htmlあなたがキャッシュオフにすることができ、この設定をすることができどこ?
klm123

他の場所に投稿したスクリーンショットから、IIS(Microsoftのインターネットインフォメーションサービスとも呼ばれます)を使用しているようです。簡単な解決策は、.htmlファイルをダブルクリックしてブラウザにロードすることfile://path/to/projectName/index.htmlです。これにより、方程式からWebサーバーが削除されます。IISの使用を継続し、キャッシュを修正するだけの場合は、次の記事を参照してください。support.microsoft.com
Dean Householder

0

Chromeは、ファイルがあまり変更されていない場合、それが何を意味するのかわからない場合に、「コンパイルされた」キャッシュバージョンを使用してこの処理を行います。htmlの場合は、解析されたドンツリーを意味します。JSプリコンパイル済みコードなど。

通常、これに対処する方法があります。多くのフレームワークは、ファイル名の内部でハッシュを使用main.md5hash.jsします。たとえば、ファイル名を変更するとキャッシュが無効になるためです。

次に、おそらくhtmlが更新されないままになります。そして明確にするために、私はわかりません、いつでもランダムなブロブでコメントを追加できます...日付のように。


0

あなたの回答の更新に基づいて、あなたの問題はIIS v7 が原因であると思います。それは、ローカルのハードドライブではなく、PCのメモリをキャッシュに使用するためです。それがHard reload、他のすべての方法が正しく機能していないようです。

私は3つの解決策を考えることができます:

1. IISキャッシュの問題の修正:(IISを搭載したPCがないため、テストされていません)

  1. スタートメニュー、クリックし[管理ツール]を、[OK]をクリックしますインターネットインフォメーションサービス(IIS)マネージャを。(画像を参照)
  2. 、ツリーのビュー左側、あなたのアプリケーションを見つけます。
  3. [ 出力キャッシュ ]メニュー項目を選択します。
  4. [ キャッシュルールの追加]をクリックしてextensionから、キャッシュを無効にするファイルを入力します.aspx(つまり、.css、.jsなど...)
  5. これで、ユーザーモードキャッシュのチェックを外すか、すべてのキャッシュをチェックしないようにすることができますこれは次のようになります。

ここに画像の説明を入力してください

ソリューションソース -詳細を読んIIS 7のキャッシュ


2. IISのいくつかの代替手段を使用するかなりの数がありますが(私の経験に基づいて)お勧めしますWAMPまたはXAMPPどちらもより良い開発「環境」を提供し、どちらもWindows 7をサポートします。VSコードでは、Live Server拡張機能を使用できます


3. 開発中にChrome シークレットモードを使用します。(IIS7で機能するかどうかは不明です)


キャッシュルールの追加/すべてのキャッシュの防止-助けにはなりません[htmlで試しました]。シークレットモード-役に立たない。
klm123

.jsファイルで試しましたか?それはあなたが何を変更するかに依存します。
awran5
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.