UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッションキャッシュを時間内にクリアできません。一連の探索が始まりました。

いくつか良い記事を見つけました。

まず、F5とCTRL+F5の違い

F5 と CTRL+F5 の違い (面倒な人向け: F5 は最初にキャッシュを読み取りますが、フレームワーク内のローカルキャッシュのみを読み取ります。CTRL+F5 はキャッシュをスキップして新しいリクエストを開始します)

背景

当社のウェブサイトはフレームワーク構造になっており、1ページに複数のiframeがあります。このため、自信を持って修正したJSファイルをSVNに送信するたびに、しばらくするとバックエンドプログラマーが私のところに来て、「なぜJSはまだエラーを報告しているのですか？すでにCTRL + F5を押しました。正しく送信しましたか？」と尋ねます。仕方なく彼の席に行き、マウスを手に取って操作しました。右クリック->現在のフレーム->新しいタブで新しいフレームを開く-> CTRL + F5->元のタブに切り替える-> F5。この操作の後、ようやくうまくいきました。同じことが何度も起こりました。これは、多くのプログラマーがまだブラウザのキャッシュメカニズムを十分に理解していないことも証明しています。

基礎

この問題の根本的な原因は、Firefox では CTRL+F5 でフレームページのキャッシュをクリアできないことです。これには、フレームページ自体と、そのすべての埋め込み要素 (.js、.css、.jpg など) が含まれます。したがって、この記事の実際のタイトルは、「Firefox でフレーム内のページのキャッシュ更新をスキップする方法」です。まず、関連する基礎知識についてお話ししたいと思います。

1. 読み取りキャッシュ

Web 開発者はよく、「キャッシュがある場合は、CTRL + F5 を押してください」と言います。または、「キャッシュがある場合は、CTRL + SHIFT + DEL でクリアしてください」と言います。ブラウザがキャッシュファイルを読み取る方法がいくつあるかご存知ですか? HTTP 要求が送信されるかどうかに基づいて、次の 2 つの方法があると思います。

1. ブラウザは、サーバーから返された有効期限から、ファイルの有効期限が切れていないと判断し、キャッシュフォルダーからキャッシュファイルを直接読み取り、ネットワーク接続なしで Web ページを表示します。

2. ブラウザは HTTP リクエストを送信し、リクエストヘッダーには If-Modified-Since フィールドと If-None-Match フィールドが含まれます。サーバーにキャッシュされたファイルを読み取るかどうかを判断させます。サーバーが 304 応答 (応答エンティティなし) を返す場合、サーバーはファイルが変更されていないと認識していることを意味します。キャッシュ内の対応するファイルを使用でき、ブラウザはこの時点でキャッシュを読み取ります。(HTTP がわからない場合は、<<HTTP Authoritative Guide>> を購入して読むことができます。または、RFC2616 を直接読んでください)

キャッシュを読み取る最初の方法を「要求なしの読み取りキャッシュ」、2 番目の方法を「変更なしの読み取りキャッシュ」と呼びます。

2. リフレッシュ方法

ここで言うリフレッシュ方式とは、Web ページを再読み込みする方法を指します。パフォーマンスに基づいて、大まかに 3 つのタイプに分類します。

1. 最も一般的には、ブラウザの更新ボタンをクリックするか、F5キーを押します。

2. CTRL+F5、キャッシュの更新をスキップする機能です

3. ブラウザのアドレスバーで Enter キーを押します。IE はこの要求を「ナビゲーション」操作として分類します。

キャッシュの読み取りに関しては、3 つの更新方法はすべて異なるパフォーマンスを示します。3 番目の方法では通常、メインページファイルのみが更新され、その他の埋め込みファイルはすべて「要求なしでキャッシュを読み取ります」。ほとんどの開発者はこの方法でページを更新しないため、この実験ではこの更新方法を比較しません。

3. F5とCTRL+F5の違い

この記事の実験部分では、F5 と CTRL+F5 の 2 つの更新方法のみを比較します。ここでは、F5 ではキャッシュをスキップできないのに、後者ではできる理由について説明します。その答えは、送信されるリクエストヘッダーが異なるためです。また、異なるブラウザーによって送信されるリクエストヘッダーにはいくつかの違いがあります。

1. F5 によってトリガーされる HTTP リクエストのリクエストヘッダーには、通常、If-Modified-Since フィールドまたは If-None-Match フィールド、あるいはその両方が含まれます。サーバーは、要求されたファイルが変更されていないと判断した場合、304 応答を返し、キャッシュはスキップされません。

2. CTRL+F5 によってトリガーされた HTTP リクエストには、リクエストヘッダーに上記の 2 つのヘッダーはありませんが、Pragma: no-cache または Cache-Control: no-cache フィールド、またはその両方があります。サーバーは、no-cache のような値を検出すると、最新のファイルで応答し、キャッシュをスキップします。

実験比較

テストのタイトルは次のとおりです: F5 および CTRL+F5 を使用して、iframe を含むページを更新します。5 つの主要ブラウザのパフォーマンスは異なります。このテストでは、Fiddler を使用してネットワーク要求を監視し、キャッシュ関連の HTTP 応答ヘッダーの影響は考慮しません。

メインページindex.htmlのソースコードは

コードをコピー

コードは次のとおりです。

<!DOCTYPE
HTML>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
</head>
<本文>
<iframe src="frame.html"></iframe>
<img src="index.jpg" />
<script src="index.js"></script>
</本文>
</html>

フレームページframe.htmlのソースコードは

コードをコピー

コードは次のとおりです。

<!DOCTYPE
HTML>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
</head>
<本文>
<img src="frame.jpg" />
<script src="frame.js"></script>
</本文>
</html>

1. IE9 の場合

シリアル番号1～6のリクエストはF5操作、シリアル番号7～12のリクエストはCTRL+F5操作です。IEではCTRL+F5を使用するとメインページとフレームページのすべてのリソースファイルがキャッシュをスキップできることがわかります。

ファイアフォックス18

シリアル番号 1 ～ 6 のリクエストは F5 操作、シリアル番号 7 ～ 9 のリクエストは CTRL+F5 操作です。Firefox では、CTRL+F5 を使用するとメインページとそのリソースファイルはキャッシュをスキップするだけですが、フレームページとそのリソースファイルは完全に「リクエストなしでキャッシュから読み込まれる」ことがわかります。

3. クローム 22

1～5の番号のリクエストはF5操作、7～9の番号のリクエストはCTRL+F5操作です。ChromeではFirefoxと同様に、CTRL+F5を使用するとメインページとそのリソースファイルはキャッシュをスキップすることしかできず、フレームページとそのリソースファイルは完全に「リクエストなしでキャッシュから読み込まれる」ことがわかります。不思議なのは、現在のページでCTRL+F5を1回押すと、そのページでF5が押されるたびに、メインページのHTTPリクエストにPragma: no-cacheリクエストヘッダーが追加され、ブラウザがそれを記憶することです。これは、番号1のリクエストの場合です。さらに奇妙なのは、F5操作では、frame.htmlが常に「リクエストなしでキャッシュから読み込まれる」ことです。これは他のブラウザとは異なります。さらに厄介なのは、Chromeでは右ボタンでフレームページを表示できないことです。

オペラ 12.50

1～6番のリクエストはF5操作、7～12番のリクエストはCTRL+F5操作です。Operaではさらにパフォーマンスが異なることがわかります。F5のみを押した場合でも、メインページ（1番）のリクエストにはPragma: no-cacheリクエストヘッダーも含まれています。CTRL+F5では、フレームページ自体（8番）を除いて、すべてのリソースファイルはキャッシュをスキップします。これはIEに近いです。

サファリ

1～5 の番号のリクエストは F5 操作です。Safari は CTRL+F5 をサポートしていません。Opera と同様に、F5 によりメインページ (番号 1) のリクエストに Pragma: no-cache リクエストヘッダーが含まれます。フレームページであるかどうかに関係なく、キャッシュのスキップはサポートされていないため、Safari ではメニューをクリックしてキャッシュをクリアすることしかできません。

解決

上記の比較によると、IE ブラウザのみが期待どおりに動作します。Firefox の解決策は次のとおりです。

1. 拡張機能をインストールする
//img.jbzj.com/file_images/article/201301/2013124142805092/ReloadPassCache_jb51.rar
2. UCスクリプトをインストールする
//img.jbzj.com/file_images/article/201301/2013124142805092/ReloadPassCache.uc.js

UC スクリプトは、プロの Firefox プレイヤーによって使用されています。ここでは、この機能をどのように実装したかについて説明します。Firefox スクリプトのプレイに興味がある方はご覧ください。本当に理解できない場合は、スキップできます。

コードをコピー

コードは次のとおりです。

//ブラウザのメインウィンドウでkeydownイベントをバインドする
位置
== "chrome://browser/content/browser.xul" &&
イベントリスナーを追加します("keydown",
関数（イベント）
{
//CTRL+F5が押された場合
if (イベント.which
=== 116 && イベント.ctrlKey) {
// 主にデフォルトのリフレッシュアクションを防ぐために、バブリングとデフォルト操作を防止します。そうしないと、2回リフレッシュされます。
イベントをデフォルトにしない();
イベントの伝播を停止します。
(機能 (コンテンツ)
{
//DOMContentLoaded イベントを現在のタグにバインドし、メインページの DOM が読み込まれた後に各フレームを更新します。
gBrowser.mCurrentBrowser.addEventListener("DOMContentLoaded",
関数 self()
{
//DOMContentLoaded イベントをアンバインドする
this.removeEventListener("DOMContentLoaded",
自己、偽);
//すべてのフレームを走査して更新する
Array.prototype.slice.call(content.frames).forEach(function (win)
{
// キャッシュの更新をスキップ
win.location.reload(true);
})
},
間違い）;
// メインページの更新を開始します
コンテンツの場所を再読み込み(true);
}）（コンテンツ）
}
//キャプチャモードで、初めてイベント処理関数をトリガーします。
},
真実）

この拡張機能をインストールすると、CTRL+F5 を押すと、IE と同様にすべてのフレームページでキャッシュの更新をスキップできます。マルチレイヤーフレーム (フレーム内のフレーム) の場合、この拡張機能は適用されません。プログラマーはそれほど不運ではないと思います。

URLリライター

疑似静的とは何ですか? 1. 動的ページを

見た目

静的ページです

なぜ疑似静的を使用するのですか? 1. ブラウザにテープが付属していないのですか? ' url 2. ページを開いた後（URL はまったく同じ）、再度開くと非常に高速になります。ページの変換はメモリ内で行われるため、同じページを再度開いた場合、再度変換されるのではなく、メモリから直接読み取られます。今はページをめくるたびに URL が変更されるので、メモリ使用量については自分で考えてください。。 3. 消費するカップリソースが少なくなります (前の項目を参照) 4. 見た目が統一され、開発に使用する言語を隠すことができます。どのような状況で擬似静的を使用すべきでしょうか? 1. 小規模なウェブサイトや、ブラウザの組み込みを特に重視するウェブサイトのみが使用します（コンテンツは頻繁に変更されませんが、検索エンジンを通じて他の人が見つけられることを期待します） 2. ポータルサイトは選択的に使用でき、コミュニティは使用せずに使用できます。

<<: 入力できない無効な値はアクションレイヤーに渡すことができません

>>: 動的なセカンダリメニューを実現するためのCSS