Ringkasan lima perkara utama mekanisme caching JS

Semakan pengetahuan: Lima perkara utama dalam mekanisme caching JS, contoh kod khusus diperlukan

Pengenalan: Dalam pembangunan bahagian hadapan, caching ialah bahagian penting dalam meningkatkan prestasi halaman web. Mekanisme caching JavaScript merujuk kepada penjimatan sumber yang diperoleh secara tempatan supaya cache boleh digunakan secara langsung dalam capaian seterusnya, dengan itu mengurangkan masa memuatkan sumber dan penggunaan lebar jalur rangkaian. Artikel ini akan memperkenalkan perkara utama dalam mekanisme caching JS dan memberikan contoh kod khusus.

1. Jenis cache

1. Cache kuat

Cache kuat merujuk kepada mekanisme caching yang dilaksanakan dengan menetapkan medan Tamat Tempoh atau Kawalan Cache dalam pengepala respons HTTP. Apabila penyemak imbas meminta sumber, ia akan menyemak dahulu sama ada sumber itu wujud dalam cache setempat Jika ia wujud dan masih dalam tempoh sah, cache akan digunakan terus tanpa menghantar permintaan.

Kod sampel:

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

2. Caching dirundingkan

Caching dirundingkan ialah mekanisme caching yang berkomunikasi dengan pelayan dengan menetapkan medan If-Modified-Since atau If-None-Match dalam pengepala permintaan HTTP. Apabila penyemak imbas meminta sumber, ia akan menghantar permintaan kepada pelayan terlebih dahulu memberitahu penyemak imbas untuk menggunakan cache Tempatan.

Kod contoh:

// 获取请求头中的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. Lokasi cache

1. Cache penyemak imbas

Cache penyemak imbas merujuk kepada fail cache yang dicache secara setempat dalam penyemak imbas. Apabila penyemak imbas mengakses sumber yang sama, ia akan menyemak sama ada terdapat fail cache untuk sumber tersebut Jika ia wujud, cache akan digunakan secara langsung.

Kod contoh:

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

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

2. Cache pelayan

Cache pelayan merujuk kepada fail cache yang dicache pada bahagian pelayan. Apabila penyemak imbas meminta sumber, pelayan menyemak sama ada fail cache wujud untuk sumber tersebut dan jika ya, mengembalikan fail cache secara terus.

Kod sampel:

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

3. Kawalan masa cache

1. Masa cache

Masa cache merujuk kepada tempoh sah cache yang kuat atau cache yang dirundingkan, dan masa cache yang berbeza boleh ditetapkan mengikut keperluan.

Kod contoh:

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

2. Strategi cache

Strategi cache merujuk kepada menetapkan strategi cache yang berbeza berdasarkan jenis sumber atau laluan sumber. Strategi caching yang berbeza boleh dilaksanakan menggunakan ungkapan biasa atau padanan rentetan.

Kod sampel:

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

4. Kemas kini cache

1. Kawalan versi

Kawalan versi bermaksud menambah nombor versi apabila meminta sumber dan mengemas kini nombor versi apabila sumber berubah. Anda boleh memaksa penyemak imbas untuk memuatkan semula sumber dengan mengemas kini nombor versi.

Kod contoh:

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

2. Paksa muat semula

Paksa muat semula merujuk kepada memberitahu penyemak imbas untuk mengemas kini cache dengan segera dengan menetapkan umur maksimum medan Kawalan Cache kepada 0.

Kod sampel:

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

5. Pembersihan cache

Pembersihan cache merujuk kepada pemadaman fail cache setempat penyemak imbas atau fail cache sebelah pelayan secara manual.

Kod sampel:

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

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

Ringkasan: Untuk mekanisme caching JS biasa dalam pembangunan bahagian hadapan, kami telah memperkenalkan lima perkara utama, termasuk jenis cache, lokasi cache, kawalan masa cache, kemas kini cache dan pembersihan cache. Menguasai perkara penting ini boleh membantu kami lebih memahami dan menggunakan mekanisme caching, meningkatkan prestasi halaman web dan meningkatkan pengalaman pengguna. Saya berharap agar pengenalan artikel ini dapat memberi manfaat kepada semua pembaca.

Atas ialah kandungan terperinci Ringkasan lima perkara utama mekanisme caching JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!