前端如何设置浏览器缓存

创作时间:

作者:

@小白创作中心

前端如何设置浏览器缓存

引用

来源

https://docs.pingcode.com/baike/2236854

前端如何设置浏览器缓存这个问题的核心观点包括：缓存控制头部、缓存过期时间、使用service worker、ETag和Last-Modified头部、缓存策略选择、缓存清理机制。其中，缓存控制头部是最基础且最常用的方式之一，通过设置HTTP响应头部来控制资源的缓存策略。

浏览器缓存是前端优化的重要部分，通过合理的缓存策略，可以显著提高页面加载速度，降低服务器负载，提升用户体验。具体来说，缓存控制头部可以设置不同的缓存指令，如
Cache-Control
、
Expires
等，控制资源的缓存时长、是否可缓存以及缓存的具体行为。例如，
Cache-Control: max-age=3600
表示资源在客户端缓存一小时。

一、缓存控制头部

缓存控制头部是通过设置HTTP响应头部来控制资源的缓存行为。常见的头部包括
Cache-Control
、
Expires
、
Pragma
等。

1、Cache-Control

Cache-Control
头部是最常用的缓存控制头部，允许设置多种缓存指令。例如：

max-age：指定资源的最大缓存时间（以秒为单位），如
Cache-Control: max-age=3600
表示资源在客户端缓存一小时。
no-cache：强制每次请求都验证资源的有效性，即使缓存中有副本。
no-store：完全禁止缓存，浏览器和中间代理都不会保存资源副本。
public：资源可以被任何缓存保存。
private：资源只能被客户端缓存，不允许中间代理缓存。

2、Expires

Expires
头部用于指定资源的过期时间（HTTP/1.0），如
Expires: Wed, 21 Oct 2023 07:28:00 GMT
。虽然
Expires
在HTTP/1.1中被
Cache-Control
的
max-age
指令取代，但仍被一些旧版浏览器使用。

3、Pragma

Pragma
头部是HTTP/1.0中的缓存控制头部，常用的指令是
no-cache
，表示不缓存资源。一般用于向后兼容：

Pragma: no-cache

二、缓存过期时间

缓存过期时间决定了缓存资源的有效期，过期时间的设置可以通过
Cache-Control
和
Expires
头部来实现。

1、设置合理的过期时间

过期时间应根据资源的更新频率进行合理设置。对于频繁更新的资源，可以设置较短的过期时间；而对于不常更新的资源，可以设置较长的过期时间，以减少重复请求。

2、使用

max-age
指令

Cache-Control
的
max-age
指令提供了更精确的过期时间控制。相比
Expires
头部，
max-age
的优势在于它是相对时间，而不是绝对时间。例如：

Cache-Control: max-age=86400

表示资源在客户端缓存一天（86400秒）。

三、使用Service Worker

Service Worker 是一种特殊的Web Worker，运行在后台线程中，能够拦截和控制网络请求，从而实现更高级的缓存策略。

1、注册Service Worker

首先，需要在页面中注册Service Worker：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

2、编写Service Worker脚本

在
service-worker.js
中，可以使用
fetch
事件监听器来拦截网络请求，并实现缓存策略：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/main.js'
      ]);
    })
  );
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request).then(function(response) {
        return caches.open('my-cache').then(function(cache) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});