分析: JS キャッシュ メカニズムの 5 つの一般的なアプリケーション シナリオ、見逃せないコンテンツの読み取り

必読: JS キャッシュ メカニズムの 5 つの一般的なアプリケーション シナリオの分析

Web 開発において、キャッシュはパフォーマンスを向上させ、サーバーの負荷を軽減する重要な手段の 1 つです。 JavaScript では、キャッシュ メカニズムを使用して、Web ページの読み込み速度を向上させ、ネットワーク リクエストを減らすことができます。この記事では、JS キャッシュ メカニズムの 5 つの一般的なアプリケーション シナリオを紹介し、具体的なコード例を示します。

1. 静的リソースのキャッシュ
静的リソースには、画像、CSS ファイル、JavaScript ファイルなどが含まれます。ブラウザーは、これらのリソースが最初に要求されたときにキャッシュします。次回同じ Web ページにアクセスすると、ブラウザはネットワーク リクエストを送信せずに、これらのリソースをキャッシュから直接読み取ります。これにより、ネットワークのオーバーヘッドを大幅に削減できます。

コードサンプル:

// 设置图片缓存
var img = new Image();
img.src = 'image.jpg';

// 设置CSS文件缓存
<link rel="stylesheet" href="style.css">

2. データキャッシュ
フロントエンド開発では、バックエンドから大量のデータを取得することがあります。時間が経つと、サーバーの負荷が増加し、Web ページの読み込みが遅くなります。フロントエンドでデータをキャッシュすると、ページの応答速度が向上します。

コード例:

// 向服务器请求数据
$.ajax({
  url: 'data.php',
  success: function(data) {
    // 将数据缓存到LocalStorage中
    localStorage.setItem('data', JSON.stringify(data));
  }
});

// 从缓存中读取数据
var data = localStorage.getItem('data');
if (data) {
  // 解析缓存数据
  var jsonData = JSON.parse(data);
  // 使用缓存数据进行页面渲染
  renderPage(jsonData);
}

3. ページ フラグメント キャッシュ
一部の安定したページ フラグメントについては、それらをキャッシュし、再度アクセスするときにキャッシュから直接取得できます。世代の重複はもうありません。そしてレンダリング。これにより、レンダリング時間を大幅に節約し、Web ページの読み込み速度を向上させることができます。

コード例:

// 判断本地是否有缓存
if (localStorage.getItem('fragment')) {
  // 直接从缓存中获取页面片段
  var fragment = localStorage.getItem('fragment');
  // 在页面中插入缓存的页面片段
  $('#container').html(fragment);
} else {
  // 从服务器请求并生成页面片段
  $.ajax({
    url: 'fragment.php',
    success: function(data) {
      // 将页面片段缓存到LocalStorage中
      localStorage.setItem('fragment', data);
      // 在页面中插入页面片段
      $('#container').html(data);
    }
  });
}

4. AJAX リクエストのキャッシュ
AJAX リクエストを使用してデータを取得する場合、同じ URL のデータを 1 回だけリクエストしてキャッシュしたい場合があります。繰り返しのリクエストによる時間と帯域幅の無駄を避けるために、データはその後の訪問に直接使用されます。

コード サンプル:

// 使用AJAX请求数据
$.ajax({
  url: 'data.php',
  cache: true, // 开启缓存
  success: function(data) {
    // 使用返回的数据进行页面渲染
    renderPage(data);
  }
});

5. フォーム データのキャッシュ
よく使用される一部のフォーム データについては、ローカルにキャッシュし、次回入力するときにキャッシュから直接読み取ることができます。ユーザーエクスペリエンスを向上させます。

コード例:

// 判断本地是否有缓存
if (localStorage.getItem('formData')) {
  // 从缓存中获取表单数据
  var formData = JSON.parse(localStorage.getItem('formData'));
  // 填充表单
  $('#name').val(formData.name);
  $('#email').val(formData.email);
  $('#phone').val(formData.phone);
}

// 表单提交时保存数据到缓存
$('form').submit(function() {
  var formData = {
    name: $('#name').val(),
    email: $('#email').val(),
    phone: $('#phone').val()
  };
  // 将表单数据缓存到LocalStorage中
  localStorage.setItem('formData', JSON.stringify(formData));
});

要約すると、JS キャッシュ メカニズムは Web 開発において非常に重要です。キャッシュを適切に利用することで、Web ページの読み込み速度が向上し、サーバーの負荷が軽減され、ユーザー エクスペリエンスが向上します。この記事が読者の JS キャッシュ メカニズムの理解と適用に役立つことを願っています。

以上が分析: JS キャッシュ メカニズムの 5 つの一般的なアプリケーション シナリオ、見逃せないコンテンツの読み取りの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。