ブラウザキャッシュ分析_html/css_WEB-ITnose

キャッシュの概念は、フロントエンドでもバックエンドでも密接に関連しており、フロントエンドとバックエンドが連携して動作する必要があります。この記事では、フロントエンドの観点からキャッシュの概念を分析します。

面接で何度も聞かれた質問:

ブラウザのリクエストとキャッシュに関連する概念は何ですか?

キャッシュ制御、有効期限が切れます。 。 。

ETagをご存知ですか？

いいえ (これはクレイジーなことですか?)

例として、Chrome でキャプチャされた js ファイルに対する Baidu リクエストを考えてみましょう:

200 first request

--------- - ------------------------

304 更新リクエスト

---------- ------ ---------------

多くの問い合わせを経て、要約は次のようになります:

1: キャッシュを受信するブラウザーに関連するキャッシュの概念サーバー応答は次のとおりです:

Cache-Control http1.1

max-age リソースがローカルにキャッシュされる秒数 (単位は秒であることに注意してください)

no-cache ブラウザは、リフレッシュ、キャリッジ リターン、ロールバック、最新のリクエスト

プライベート レスポンスはプライベート キャッシュ (ブラウザ内など) としてのみ使用でき、ユーザー間で共有することはできません。パブリック レスポンスはキャッシュされ、複数のユーザー間で共有されます。通常の状況では、HTTP 認証が必要な場合、応答は自動的にプライベートに設定されます

Expires:

クライアントがこの時間より前にチェック (リクエストを送信) できないようにするキャッシュの有効期限は、http1.0 に属します。は、cache-control Low よりも高い優先度を持ち、クライアントの時間に基づいて計算されます

問題が発生します。 http1.1 にはキャッシュ制御の概念があります。

last-modified: サーバー側ファイルの最終変更時刻。値がリクエストの if-Modified-Since と同じ場合、304 キャッシュ使用されます

ETag: サーバー側リソースが変更されると、それに応じて ETag も変更されます。値がリクエストの if-None-Match と同じ場合、304 キャッシュが使用されます。 。

2: ブラウザーによって行われたリクエストに関連するキャッシュの概念は次のとおりです:

If-Modified-Since: クライアントのキャッシュされたファイルの最終変更時刻 last-modified

if-none-match:クライアントのキャッシュされたファイルの etag 値

cache-control: max-age=0 no-cache

Prama: no-cache は HTTP 1.0 で定義されているため、互換性を保つためにHTTP 1.0 では、Pragma: no-cache と Cache が同時に使用されます。 -Control: no-cache

3: Last-modified と ETag は両方ともサーバー側のファイルが変更されているかどうかを確認します。彼らは同時に使用しましたか？

ETag は主に、Last-Modified では解決できないいくつかの問題を解決するために使用されます。

1. サーバーによってはファイルの最終更新時刻を正確に取得できないため、最終更新時刻からファイルが更新されたかどうかを判断することができません。

2. 一部のファイルは非常に頻繁に変更され、Last-Modified の精度は数秒以内です。

3. 一部のファイルの最終変更時刻が変更されましたが、内容は変更されていません。 クライアントにこのファイルが変更されたと思われたくないのです。

4: ページを再表示する方法は何通りありますか?

1. 更新

2. ブラウザの戻るボタン

3. アドレスバーに入力

4. 強制更新(command+shift+r)

違い:

新しいサーバーは次の場合に要求されます戻るif-none-match と if-modified-since がそれぞれサーバーの etag と last-modified と一致している場合、ブラウザーはキャッシュを使用します

ブラウザーのフォールバックとアドレスバーの戻りの動作に注意してください。車の動作は、クライアントのキャッシュを直接使用します。つまり、キャッシュからの 200

は再リクエストされます。304

はありません。

ただし、サーバー側でcache-control: noneが設定されている場合、どのような動作であってもキャッシュなしで200を再リクエストします

5: 特殊な状況、動的にロードされるjsファイル

この問題の発見requirejs から始まりました、

Requirejs の画像の R.JS を更新すると、Requirejs によってロードされた JS ファイルは常にキャッシュから 200 であることがわかります。それが Requirejs の内部実装に関連していることを確認し、新しい script タグでリクエストしてから、それが動的読み込みに関連しているかどうかを推測し、jquery の読み込みを試してみます

その結果、jquery の動的読み込みも実行されます。更新後にキャッシュから 200 を取得してから、自分で動的にロードしましたが、テスト後も同じだったので、最初の判断では、動的ロードのキャッシュが更新された後、デフォルトのブラウザーのキャッシュが使用されました

。確信が持てなかったので、会社の専門家にアドバイスを求めたところ、得られた答えは

"

更新時に Expires/Cache-Control 設定は無視され、サーバーが再度リクエストされます

後続の非同期ロードページのリソースは影響を受けません

したがって、引き続きキャッシュから取得されます

"