JS キャッシュメカニズムの 5 つの重要なポイントのまとめ

知識の確認: JS キャッシュ メカニズムの 5 つの重要なポイント、具体的なコード例が必要です

はじめに: フロントエンド開発では、Web ページを改善するためにキャッシュが重要ですパフォーマンス 1 つのリング。 JavaScript キャッシュ メカニズムとは、取得したリソースをローカルに保存し、その後のアクセスでキャッシュを直接使用できるようにすることで、リソースの読み込み時間とネットワーク帯域幅の消費を削減することを指します。この記事では、JS キャッシュ メカニズムの重要なポイントを紹介し、具体的なコード例を示します。

1. キャッシュ タイプ

1. 強力なキャッシュ

強力なキャッシュは、HTTP 応答ヘッダーの Expires または Cache-Control フィールドを設定することによって実現されます。 キャッシュ メカニズム。ブラウザがリソースをリクエストすると、まずリソースがローカル キャッシュに存在するかどうかを確認し、存在し、有効期間内であれば、リクエストを送信せずに直接キャッシュを使用します。

サンプル コード:

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. ネゴシエーション キャッシュ

ネゴシエーション キャッシュは、HTTP リクエストで If-Modified-Since または If-None- を設定することで設定されます。 header サーバー キャッシュ メカニズムと通信するためのフィールドと一致します。ブラウザがリソースをリクエストすると、まずリクエストをサーバーに送信します。サーバーはリクエスト ヘッダーのフィールドとリソースの最終変更時刻を比較します。リソースが変更されていない場合は、ステータス コード 304 Not Modified を返し、ローカル キャッシュを使用するようにブラウザに通知します。

サンプルコード:

// 获取请求头中的If-Modified-Since字段
const ifModifiedSince = req.headers['if-modified-since'];

// 获取资源的最后修改时间
const lastModified = fs.statSync(filepath).mtime.toUTCString();

// 比较请求头中的字段与最后修改时间
if (ifModifiedSince === lastModified) {
  res.statusCode = 304; // Not Modified
  res.end();
} else {
  res.setHeader('Last-Modified', lastModified);
  // 返回资源
  res.end(file);
}

2. キャッシュの場所

1. ブラウザキャッシュ

ブラウザキャッシュとは、ブラウザローカルのキャッシュを指します。キャッシュファイル。ブラウザが同じリソースにアクセスすると、まずそのリソースのキャッシュ ファイルがあるかどうかを確認し、存在する場合はキャッシュを直接使用し、存在しない場合はネットワーク リクエストを送信します。

サンプルコード:

// 读取缓存
const cache = localStorage.getItem('cache');

// 判断缓存是否存在
if (cache) {
  // 使用缓存
} else {
  // 发送网络请求
}

2. サーバーキャッシュ

サーバーキャッシュとは、サーバー側にキャッシュされたキャッシュファイルを指します。ブラウザがリソースを要求すると、サーバーはそのリソースのキャッシュ ファイルが存在するかどうかを確認し、存在する場合はキャッシュ ファイルを直接返します。

サンプル コード:

// 判断文件是否存在
if (fs.existsSync(filepath)) {
  // 返回缓存文件
} else {
  // 发送网络请求
}

3. キャッシュ時間の制御

1. キャッシュ時間

キャッシュ時間とは、強力なキャッシュまたはネゴシエートされたキャッシュを指します。必要に応じて、有効期間を異なるキャッシュ時間に設定できます。

サンプル コード:

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. キャッシュ戦略

キャッシュ戦略とは、リソース タイプまたはリソース パスに基づいてさまざまなキャッシュ戦略を設定することを指します。正規表現または文字列マッチングを使用して、さまざまなキャッシュ戦略を実装できます。

サンプルコード:

// 设置图片资源的缓存时间为1个月
if (req.url.match(/.jpg|.png|.gif$/)) {
  res.setHeader('Cache-Control', 'max-age=2592000');
}

4. キャッシュの更新

1. バージョン管理

バージョン管理とは、リソースをリクエストするときにバージョンを追加することを指します。バージョン番号は、リソースが変更されると更新されます。バージョン番号を更新すると、ブラウザーにリソースを強制的に再ロードできます。

サンプル コード:

<!-- 添加版本号 -->
<link rel="stylesheet" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>

2. 強制リフレッシュ

強制リフレッシュとは、Cache-Control フィールドの max-age を次のように設定することによってブラウザに通知することを指します。 0 キャッシュをすぐに更新します。

サンプルコード:

// 强制刷新缓存
res.setHeader('Cache-Control', 'max-age=0');

5. キャッシュクリア

キャッシュクリアとは、ブラウザのローカルキャッシュファイルまたはサーバーサイドキャッシュファイルを手動で削除することを指します。

サンプル コード:

// 清除浏览器缓存
localStorage.removeItem('cache');

// 清除服务器缓存
fs.unlinkSync(filepath);

概要: フロントエンド開発における一般的な JS キャッシュ メカニズムについて、キャッシュ タイプ、キャッシュの場所、キャッシュ時間の制御、キャッシュの更新、およびキャッシュの更新を含む 5 つの重要なポイントを紹介しました。キャッシュのクリア。これらの重要なポイントをマスターすることは、キャッシュ メカニズムをより深く理解して適用し、Web ページのパフォーマンスを向上させ、ユーザー エクスペリエンスを向上させるのに役立ちます。この記事の紹介が読者の皆様のお役に立てれば幸いです。

以上がJS キャッシュメカニズムの 5 つの重要なポイントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。