JavaScript中的浏览器缓存和缓存控制

翻滚的胖子
2023-06-16 15:09:23
JavaScript Java

在开发Web应用时，浏览器缓存是一个非常重要的概念。它可以大大提高Web应用的性能，减少服务器请求。在本文中，我们将深入探讨JavaScript中的浏览器缓存和缓存控制的相关知识。

浏览器缓存的基本概念

浏览器缓存是指浏览器将一些静态资源（例如HTML文档、CSS样式表、JavaScript脚本、图片等）存储在本地磁盘上，以便之后的访问可以更快地加载。这些静态资源在第一次加载页面时被浏览器下载并缓存，之后再次访问时就可以直接从缓存中读取，而无需再次请求服务器。

浏览器缓存可以分为两种：强缓存和协商缓存。

强缓存

强缓存是利用HTTP头中的Expires和Cache-Control字段来控制的。Expires是一个时间戳，表示缓存资源的过期时间，而Cache-Control则更加灵活，可以通过max-age字段来指定缓存资源的有效时间。

// 设置缓存过期时间为1小时
response.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());

// 设置缓存有效时间为10分钟
response.setHeader('Cache-Control', 'max-age=600');

当浏览器请求一个资源时，会首先检查是否存在强缓存。如果强缓存命中，浏览器就直接从缓存中获取资源，而不会发送请求到服务器。

协商缓存

协商缓存是利用HTTP头中的Last-Modified和ETag字段来控制的。Last-Modified是一个时间戳，表示资源在服务器上的最后修改时间，而ETag则是一个字符串，表示资源的唯一标识。

// 设置Last-Modified和ETag字段
response.setHeader('Last-Modified', new Date(lastModified).toUTCString());
response.setHeader('ETag', etag);

当浏览器请求一个资源时，会首先检查是否存在强缓存。如果强缓存未命中，浏览器就会发送一个请求到服务器，但是服务器并不会直接返回资源，而是返回一个状态码304（Not Modified）和一个空的响应体。同时，服务器还会在响应头中添加Last-Modified和ETag字段，表示资源的最后修改时间和唯一标识。

浏览器收到服务器的响应后，会比较本地缓存的Last-Modified和ETag字段与服务器返回的字段是否一致。如果一致，说明缓存仍然有效，浏览器就直接从缓存中获取资源。否则，说明缓存已经失效，浏览器就会重新请求资源。

缓存控制的实现

在JavaScript中，我们可以通过设置HTTP头来实现缓存控制。以下是一个缓存控制的例子：

function getData(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.setRequestHeader('Cache-Control', 'no-cache');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(null);
}

在这个例子中，我们通过XMLHttpRequest发送了一个GET请求，并在请求头中设置了Cache-Control字段为no-cache。这样可以告诉浏览器不要使用缓存，而是直接从服务器获取最新的资源。