浏览器缓存汇总

针对静态资源（CSS、JS、图片）使用缓存

 

加载更快，节省带宽，降低服务器压力；

 

缓存分类，服务端缓存和客户端缓存，服务端指 CDN 缓存，客户端为浏览器缓存；

 

浏览器缓存机制

 

浏览器缓存分强缓存和协商缓存；

 

强缓存会直接从本地缓存中读取资源，不会发送请求至服务器；协商缓存会发送一个请求到服务器，如果命中协商缓存，服务器会返回 304 状态码，浏览器接收到请求返回后，从本地缓存加载资源；最不理想的情况，请求会返回静态资源，浏览器更新本地缓存数据 200；

 

强缓存不会发送请求，协商缓存会发送协商请求；

 

浏览器中强缓存的 response header 不是来自服务器，而是来自之前缓存的 header；

 

通过 HTTP 请求协议头信息控制缓存：Expires、Cache-control、Last-modified／If-Modified-Since、Etag／If-None-Match；

 

Expires

 

HTTP1.0 提出的表示资源过期时间的 Header 属性，由服务器返回，例：Expires:Thu, 31 Dec 2016 23:55:55 GMT；当服务器设置的过期时间大于客户端当前的时间时，走强缓存机制，直接本地加载资源；

 

弊端：由于缓存过期时间又服务器设定，与客户端本地时间存在误差；

 

Cache-Control

 

HTTP1.1 开始用于替代 Expires，同样由服务端设定，当上次缓存时间 + max-age 大于当前客户端时间，则命中强缓存；Cache-Control 的优先级要高于 Expires；

 

public：所有内容都将被缓存（客户端和代理服务器都可以缓存），默认为 public，表示跨会话共享缓存，多用户使用同一浏览器可以共享缓存的资源；

private：内容址缓存到私有缓存中（仅客户端可以缓存，代理服务器不能缓存）；

no-cache：必须先与服务器确认资源是否修改，如果存在 ETag 验证令牌，no-cache 会发起往返通信来验证缓存的响应，如果资源未被修改，可以避免下载；

no-store：所有内容都不会被缓存；

must-revalidationg／proxy-revalidation：如果缓存过期，请求必须发送到服务器进行重新验证；

max-age=xxx：缓存的内容在 xxx 秒后失效，优先级高于 Last-Modified，max-age 有效期内浏览器不会向服务器发送请求，即使服务器资源发生变化，浏览器也不会收到通知；

s-maxage：只用于共享缓存，会覆盖 max-age 和 Expires；

 

Last-modified & If-Modified-Since

 

Last-modified 是请求返回 response header 中的字段，表明服务器端文件的最后修改时间，需要和 cache-control 共同使用，当浏览器端强缓存失效时，会向服务端发送确认请求，在 request header 中携带 If-Modified-Since 报头，如果资源未被修改，则服务器返回 304，继续使用浏览器缓存资源，否则返回 200 与服务器最新资源；

 

ETag & If-None-Match

 

由服务端生成的资源唯一标识，例：对文件的索引节、大小、最后修改时间进行 Hash 作为 ETag 使用，可以更精确的获知静态资源是否有变动，Last-modified 只能精确到秒；

当强缓存过期时，浏览器发送的请求头中包含 If-None-Match，服务器收到请求后比对现有资源的校验令牌，返回 304 或 200；

 

CDN 缓存

 

Content Delivery Network，将静态资源内容发布到最接近用户的网路边缘，使用户可以就近获取资源，提高用户访问速度；

 

浏览器缓存流程

 

 

1、客户端请求 A 资源；

2、服务器返回 A，并返回 Last-Modified／ETag；

3、客户端缓存 A 和 response header；

4、再次请求 A，如强缓存失效，则在 request header 中加上 If-Modified-Since／If-none-match 供服务端判断；

5、服务端返回 304 或 200 + new A；