Konsep mekanisme caching JS yang penting: memahami dan mempopularkan lima mata pengetahuan

Mempopularkan pengetahuan: Untuk memahami lima konsep penting mekanisme caching JS, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan, mekanisme caching JavaScript (JS) ialah konsep yang sangat penting. Memahami dan menggunakan mekanisme caching dengan betul boleh meningkatkan kelajuan pemuatan dan prestasi halaman web. Artikel ini akan memperkenalkan lima konsep penting mekanisme caching JS dan menyediakan contoh kod yang sepadan.

1. Cache penyemak imbas

Cache penyemak imbas bermakna apabila anda melawat halaman web buat kali pertama, penyemak imbas akan menyimpan sumber yang berkaitan halaman web (seperti fail JS, fail CSS, imej, dll.) ke dalam cache setempat . Apabila halaman web yang sama diakses semula, penyemak imbas memuatkan sumber daripada cache dan bukannya memuat turunnya semula. Ini mengurangkan permintaan rangkaian dan meningkatkan kelajuan memuatkan halaman.

Contoh kod:

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

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

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

2. Caching HTTP

Caching HTTP merujuk kepada mekanisme caching berdasarkan protokol HTTP. Apabila penyemak imbas menghantar permintaan, pelayan boleh mengarahkan penyemak imbas sama ada untuk cache sumber dengan menetapkan medan Kawalan Cache dalam pengepala respons. Medan kawalan cache biasa termasuk Cache-Control和Expires.

Contoh kod:

// 使用协商缓存
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. Cap jari fail

Cap jari fail merujuk kepada rentetan pengecam unik yang dijana dengan pencincangan kandungan fail, yang digunakan untuk menentukan sama ada kandungan fail telah berubah. Kemas kini cache boleh dicapai dengan menggunakan cap jari fail sebagai sebahagian daripada parameter pertanyaan atau nama fail apabila penyemak imbas meminta fail tersebut.

Contoh kod:

// 生成文件指纹
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. Strategi caching

Strategi caching merujuk kepada menentukan tempoh sah dan strategi kemas kini cache berdasarkan kekerapan kemas kini dan kepentingan sumber. Strategi caching biasa termasuk caching yang kuat dan caching yang dirundingkan. Caching yang kuat memuatkan sumber terus daripada cache, manakala caching rundingan berinteraksi dengan pelayan untuk menentukan sama ada sumber tersedia.

Contoh kod:

// 设置强缓存
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. Kemas kini cache

Semasa pembangunan, kami sering menghadapi masalah sumber statik dikemas kini tetapi sumber lama masih dimuatkan dalam penyemak imbas pengguna. Untuk menyelesaikan masalah ini, anda boleh menggunakan kaedah kemas kini cache, seperti menambah nombor versi, mengubah suai cap jari fail, dsb. Dengan mengemas kini cache, anda boleh memastikan bahawa pengguna sentiasa memuatkan sumber terkini semasa mengakses halaman.

Sampel kod:

// 添加版本号
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);

Ringkasan

Memahami lima konsep penting mekanisme caching JS boleh membantu kami mengoptimumkan prestasi halaman web dengan lebih baik. Melalui cara teknikal seperti cache penyemak imbas, cache HTTP, cap jari fail, dasar cache dan kemas kini cache, kami boleh meningkatkan kelajuan pemuatan halaman web, mengurangkan beban pelayan dan meningkatkan pengalaman pengguna.

Perlu diingatkan bahawa senario dan keperluan yang berbeza mungkin memerlukan strategi caching yang berbeza. Oleh itu, dalam pembangunan sebenar, kita harus memilih mekanisme caching yang sesuai mengikut situasi tertentu, dan menjalankan ujian prestasi dan pengoptimuman. Hanya dengan pembelajaran dan amalan berterusan kami boleh menguasai dan menggunakan mekanisme caching JS untuk memberikan pengguna pengalaman halaman web yang lebih baik.

Atas ialah kandungan terperinci Konsep mekanisme caching JS yang penting: memahami dan mempopularkan lima mata pengetahuan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!