前端浏览器的缓存策略

前言

浏览器缓存是一种在本地保存资源副本，以便在下次请求时快速获取的技术。浏览器缓存可以提高网站的性能，减少服务器的负载，节省流量和时间。

浏览器缓存的策略主要分为两种：过期机制和验证机制。

• 过期机制：是指浏览器根据资源的过期时间，判断是否可以直接使用缓存中的副本，而无需向服务器发起请求。过期时间可以通过以下两种方式设置：
  • Cache-Control：这是一个HTTP响应头，用于指定资源的最大有效期。例如，Cache-Control: max-age=3600表示资源在3600秒内有效，之后需要重新请求。
  • Expires：这也是一个HTTP响应头，用于指定资源的具体过期时间。例如，Expires: Wed, 21 Oct 2023 07:28:00 GMT表示资源在2023年10月21日7点28分过期，之后需要重新请求。如果同时设置了Cache-Control和Expires，那么Cache-Control的优先级更高。
• 验证机制：是指浏览器在请求资源时，向服务器发送一些标识，询问资源是否有更新，如果没有更新，那么服务器返回304状态码，表示资源未修改，浏览器可以继续使用缓存中的副本；如果有更新，那么服务器返回200状态码，以及最新的资源，浏览器更新缓存并渲染资源。验证机制可以通过以下两种方式实现：
  • Last-Modified：这是一个HTTP响应头，用于表示资源的最后修改时间。例如，Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT表示资源在2023年10月21日7点28分被修改过。当浏览器再次请求该资源时，会发送一个If-Modified-Since的HTTP请求头，其值为上次的Last-Modified的值，服务器根据这个值判断资源是否有更新。
  • ETag：这是一个HTTP响应头，用于表示资源的唯一标识。例如，ETag: "5d8c72a5edda8d6a:0"表示资源的ETag值为"5d8c72a5edda8d6a:0"。当浏览器再次请求该资源时，会发送一个If-None-Match的HTTP请求头，其值为上次的ETag的值，服务器根据这个值判断资源是否有更新。

Last-Modified和ETag的比较：

• ETag比Last-Modified更准确，因为如果打开没有修改的文件，Last-Modified也会改变，而且Last-Modified的单位时间是秒，如果文件在一秒钟内被修改，它仍然会命中缓存³。
• ETag比Last-Modified更消耗性能，因为服务器需要为每个资源生成和比较ETag的值，而Last-Modified只需要获取文件的修改时间即可。
• 如果同时设置了Last-Modified和ETag，那么服务器会优先根据ETag的值判断资源是否有更新

。