Important JS caching mechanism concepts: understand and popularize five knowledge points

Knowledge popularization: Understand the five important concepts of JS caching mechanism, specific code examples are needed

In front-end development, JavaScript (JS) caching mechanism is a very key the concept of. Understanding and correctly applying caching mechanisms can greatly improve the loading speed and performance of web pages. This article will introduce five important concepts of JS caching mechanism and provide corresponding code examples.

1. Browser cache

Browser cache means that when you visit a webpage for the first time, the browser will save the relevant resources of the webpage (such as JS files, CSS files, pictures, etc.) into the local cache. When the same web page is accessed again, the browser loads the resources from the cache instead of re-downloading them. This reduces network requests and increases page loading speed.

Code example:

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

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

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

2. HTTP caching

HTTP caching refers to the caching mechanism based on the HTTP protocol. When a browser sends a request, the server can instruct the browser whether to cache the resource by setting the Cache Control field in the response header. Common cache control fields are Cache-Control and Expires.

Code example:

// 使用协商缓存
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. File fingerprint

File fingerprint refers to a string of unique identifiers generated by hashing the file content and is used to determine the file Whether the content has changed. Cache updates can be achieved by using the file fingerprint as part of a query parameter or file name when the browser requests the file.

Code example:

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

The cache strategy refers to determining the validity period and update strategy of the cache based on the update frequency and importance of the resource. Common caching strategies include strong caching and negotiated caching. Strong caching loads resources directly from the cache, while negotiation caching interacts with the server to determine whether resources are available.

Code example:

// 设置强缓存
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. Cache update

During development, we often encounter the problem that static resources are updated but the old resources are still loaded in the user's browser. In order to solve this problem, you can use cache update methods, such as adding version numbers, modifying file fingerprints, etc. By updating the cache, you can ensure that users always load the latest resources when accessing the page.

Code example:

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

Summary

Understanding the five important concepts of JS caching mechanism can help us better optimize web page performance. Through technical means such as browser caching, HTTP caching, file fingerprinting, caching policies, and cache updates, we can improve the loading speed of web pages, reduce server load, and improve user experience.

It should be noted that different scenarios and requirements may require different caching strategies. Therefore, in actual development, we should choose an appropriate caching mechanism according to the specific situation, and conduct performance testing and optimization. Only by continuous learning and practice can we master and use the JS caching mechanism to provide users with a better web experience.

The above is the detailed content of Important JS caching mechanism concepts: understand and popularize five knowledge points. For more information, please follow other related articles on the PHP Chinese website!