HTTP缓存策略与方案

---

前言

一个Web应用在生产环境中，往往经常会被用户访问很多次，现代计算机的发展水平，网页页面加载和渲染的速度是非常快速的，可以做到毫秒级别。然而在页面加载和渲染整个过程中，比较慢的环节就是网络请求。考虑到用户的使用体验，我们期望应用的加载速度越快越好，因此在做页面性能优化的时候，我们就要去针对那个最大的瓶颈入手——网络请求。而且由于网络环境具有不稳定性，会加剧我们的网络请求以及页面加载的不稳定性。因此更加提升了我们优化网络请求的必要性。

为了让网络请求更快一些，我们就要尽量减少我们网络请求资源的“体积”和“数量”，基于这个背景，我们需要使用缓存策略，而Http协议也为我们提供了非常强大的缓存机制。

---

一、什么是HTTP缓存策略

浏览器缓存是浏览器在本地磁盘对用户最近请求过的特定资源进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载可以多次使用的特定资源。用来减少发送不必要的网络请求，加块页面的加载速度，提升用户的使用体验

二、缓存策略

1. 与缓存有关的首部字段名

与强缓存有关的首部字段名主要有两个： Expires和Cache-control

Expires

Expires首部字段是HTTP/1.0中定义缓存的字段，其给出了缓存过期的绝对时间，即在此时间之后，响应资源过期，属于实体首部字段

Expires: Wed, 11 May 2022 03:50:47 GMT

上述示例表示该资源将在以上时间之后过去，而在该时间之前浏览器可以直接从浏览器缓存中读取数据，无需在此请求服务器，注意这里无需在此请求服务器便是命中了强缓存。

但是因为Expires设置的缓存过期时间是一个绝对时间，所以会受到客户端时间的影响（例如时区）而变得不精准（后面给出了max-age来代替使用）

Cache-Control

Cache-Control首部字段是HTTP/1.1中定义缓存的字段，其用于控制缓存的行为，可以组合使用多种指令，多个指令直接可以通过“，”分割，属于通用首部字段，常用的指令有：max-age，s-max-age，public/private，no-cache/no store等。

Cache-Control: max-age:3600, s-maxage=3600,public
Cache-control: no-cache

max-age 指令给出了缓存过期的相对时间，单位为秒数，当其余Expires同时出现时，max-age的优先级更高，但往往为了做向下兼容，两者都会经常出现在响应首部中。

同时max-age还可以在请求首部中被使用，告知服务器客户端希望接收一个存在时间不大于多少秒的资源。

s-maxage与max-age不同之处在于，其只适用于公共缓存服务器，比如资源从源服务器发出后又被中间的代理服务器接收并缓存，当使用s-maxage指令后，公共缓存服务器将直接忽略Expires和max-age指定的值。

public 指定表示该资源可以被任何节点缓存（包括客户端和代理服务器）

private与public相反，表示只提供给客户端缓存，代理服务器不会进行缓存，同时设置了private指令后，s-maxage指令将被忽略

no-cache 和 no store这两个指令在请求和响应中都可以使用，两者看上去都代表不缓存，但是在响应首部中被使用时，no-store才是真正的不进行任何缓存，no-cache在请求首部和响应首部中略有不同。

当no-cache在请求首部中被使用时，表示告知(代理**)服务器不直接使用缓存，要求向源服务器发起请求**，而当在响应首部中被返回时，表示客户端可以缓存资源，但每次使用缓存资源前都必须先向服务器确认其有效性，这对每次访问都需要确认身份的应用来说很有用。

我们也可以在代码里加入meta标签的方式来修改资源的请求首部：

<meta http-equiv="Cache-Control" content="no-cache"></meta>

上面我们已经了解了强缓存下的请求相应的两个主要首部字段，接下来我们在看看协商缓存中设计的主要首部字段名：If-Modified-Since , If-Modified-Since, Etag, If-None-Match

Last-Modified和If-Modified-Since

Last-Modified首部字段代表资源的最后修改时间，属于响应首部字段，当浏览器第一次接收到服务器返回的资源的Last-Modified值后，会把这个值存储起来，并下次访问该资源时通过携带If-Modified-Since请求首部发送给服务器验证该资源有没有过期

Last-Modified: Fri, 14 May 2021 17:23：13 GMT
If-M