JS キャッシュ メカニズムの重要な概念: 5 つの知識ポイントを理解して普及する

知識の普及: JS キャッシュ メカニズムの 5 つの重要な概念を理解します。具体的なコード例が必要です。

フロントエンド開発では、JavaScript (JS) キャッシュ メカニズムはという非常に重要なコンセプトです。キャッシュ メカニズムを理解して正しく適用すると、Web ページの読み込み速度とパフォーマンスを大幅に向上させることができます。この記事では、JS キャッシュ メカニズムの 5 つの重要な概念を紹介し、対応するコード例を示します。

1. ブラウザ キャッシュ

ブラウザ キャッシュとは、初めて Web ページにアクセスしたときに、ブラウザが Web ページの関連リソース (JS ファイル、CSS ファイル、画像など) を保存することを意味します。 、など）をローカル キャッシュに保存します。同じ Web ページに再度アクセスすると、ブラウザはリソースを再ダウンロードするのではなく、キャッシュからリソースを読み込みます。これにより、ネットワーク リクエストが減少し、ページの読み込み速度が向上します。

コード例:

// 设置缓存
localStorage.setItem('name', 'John');

// 读取缓存
let name = localStorage.getItem('name');
console.log(name); // 输出：John

// 清除缓存
localStorage.removeItem('name');

2. HTTP キャッシュ

HTTP キャッシュとは、HTTP プロトコルに基づくキャッシュ メカニズムを指します。ブラウザがリクエストを送信するとき、サーバーはレスポンス ヘッダーの Cache Control フィールドを設定することで、リソースをキャッシュするかどうかをブラウザに指示できます。一般的なキャッシュ制御フィールドは、Cache-Control と Expires です。

コード例:

// 使用协商缓存
let request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api/data', true);
request.setRequestHeader('If-None-Match', 'xyz'); // 设置ETag
request.send();

request.onload = function() {
  if (request.status === 304) {
    // 从缓存中加载资源
    console.log('加载缓存数据');
  } else {
    // 第一次加载数据
    console.log('加载新数据');
  }
};

3. ファイル フィンガープリント

ファイル フィンガープリントは、ファイルの内容をハッシュすることによって生成される一意の識別子の文字列を指し、ファイルがファイル フィンガープリントかどうかを判断するために使用されます。内容が変わりました。キャッシュの更新は、ブラウザーがファイルを要求するときに、クエリ パラメーターまたはファイル名の一部としてファイル フィンガープリントを使用することによって実現できます。

コード例:

// 生成文件指纹
const fileContent = 'console.log("Hello, world!")';
const fileHash = md5(fileContent);

// 文件加载时添加文件指纹
const script = document.createElement('script');
script.src = `https://example.com/js/app-${fileHash}.js`;
document.body.appendChild(script);

4. キャッシュ戦略

キャッシュ戦略とは、キャッシュの更新頻度と重要性に基づいて、キャッシュの有効期間と更新戦略を決定することを指します。リソース。一般的なキャッシュ戦略には、強力なキャッシュとネゴシエートされたキャッシュが含まれます。強力なキャッシュはリソースをキャッシュから直接読み込みますが、ネゴシエーション キャッシュはサーバーと対話してリソースが利用可能かどうかを判断します。

コード例:

// 设置强缓存
res.setHeader('Cache-Control', 'max-age=3600'); // 缓存有效期为1小时
res.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString());

// 设置协商缓存
res.setHeader('ETag', 'xyz'); // 设置ETag
res.setHeader('Last-Modified', new Date().toUTCString()); // 设置Last-Modified

// 判断缓存是否可用
if (req.headers['if-none-match'] === 'xyz' && req.headers['if-modified-since'] === lastModified) {
  res.writeHead(304); // 缓存可用，返回304
  res.end();
} else {
  res.writeHead(200); // 返回新资源
  res.end(fileContent);
}

5. キャッシュの更新

開発中、静的リソースは更新されるが、古いリソースがユーザーのブラウザに読み込まれたままであるという問題がよく発生します。 。この問題を解決するには、バージョン番号の追加、ファイルのフィンガープリントの変更などのキャッシュ更新方法を使用できます。キャッシュを更新すると、ユーザーがページにアクセスするときに常に最新のリソースを読み込むことができます。

コード例:

// 添加版本号
const script = document.createElement('script');
script.src = `https://example.com/js/app?v=1.0`;
document.body.appendChild(script);

// 修改文件指纹
const fileContent = 'console.log("Hello, world!")';
const fileHash = md5(`${fileContent}${newData}`);
const script = document.createElement('script');
script.src = `https://example.com/js/app-${fileHash}.js`;
document.body.appendChild(script);

概要

JS キャッシュ メカニズムの 5 つの重要な概念を理解すると、Web ページのパフォーマンスを最適化するのに役立ちます。ブラウザー キャッシュ、HTTP キャッシュ、ファイル フィンガープリント、キャッシュ ポリシー、キャッシュ更新などの技術的手段を通じて、Web ページの読み込み速度を向上させ、サーバーの負荷を軽減し、ユーザー エクスペリエンスを向上させることができます。

シナリオや要件が異なれば、異なるキャッシュ戦略が必要になる場合があることに注意してください。したがって、実際の開発では、特定の状況に応じて適切なキャッシュメカニズムを選択し、パフォーマンステストと最適化を実行する必要があります。継続的な学習と実践によってのみ、JS キャッシュ メカニズムを習得して使用し、ユーザーにより良い Web エクスペリエンスを提供することができます。

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