29、浏览器缓存的原理

一、浏览器缓存和http协议标头

1、缓存优点：

• 提高网页请求响应的速度

• 降低服务器带宽的占用

• 降低服务器的负载（主要指的是cpu 内存这些硬件资源）占用

• 提高用户的体验度

• 降低用户的焦虑

2、浏览器缓存是在用户的disk（磁盘）或者内存上面

3、浏览器的缓存原理

（1）当网页需要资源的时候，首先访问浏览器缓存，如果浏览器缓存没有数据时，那么就会请求服务器端，服务器进行响应数据，浏览器就会同时把数据资源存储起来，当网页再次需要这个资源的时候，还是先访问浏览器缓存，发现有数据就会直接返回。

（2）原理图：

4、浏览器缓存的五个概念

（1）浏览器：资源的请求方

（2）源服务器：就是后端服务器，真正资源的来源端，可以将内容缓存到任何的位置。

（3）新鲜度：就是缓存数据的时间周期。

（4）检验值：缓存过期之后，会继续请求服务端返回数据，将会对旧的缓存和新的数据内容做对比，如果数据没有变动，那么只需要更新缓存的过期时间，不需要更新缓存内容。

（5）缓存失效：就是缓存过期并且缓存的内容和新的内容存在不同时，就会将新的内容存储到缓存中。

二、http协议标头

浏览器和服务器之间主要的通讯方式是http协议，所有的缓存策略都是在http标头中，每当浏览器请求服务端时，服务都会在响应报文中设置一段标头。

1、新鲜度相关的标头：cache-control、pragma、expires。

• cache-control： private、public、no-store、no-cache、max-age、s-max-age、must-revalidate、proxy-revalidate

  （1）private：内容是对用户私有的，只能在浏览器中缓存，而不能在服务器中缓存

  （2）public：表示可以在任何位置缓存

  （3）no-store：表示不可以被任何人缓存

  （4）no-cache：可以被缓存，但是需要内容进行校验

  （5）max-age：表示缓存的过期时间，单位为秒。

  （6）s-max-age：共享缓存的过期时间（代理服务器会使用这个时间）

  （7）must-revalidate：如果内容缓存有效期超过了cache-control的max-age时间，必须让请求服务器

  （8）proxy-revalidate：跟must-revalidate相同，不过用于代理服务器。

• pragma:设置no-cache数据就不会被缓存

• expires：设置缓存期限

2、检验值相关的标头：etag（entity tag 实体标签）、last-modified、if-none-match、if-modify、if-modified-since

• ETag：资源的唯一标识符，缓存有效期过期后，再次请求服务器会附带请求头if-none-match，它的值就是上一次请求返回的ETag，然后服务器收到当前的请求后，会将它的值跟新的内容进行对比，如果不相同，返回新的ETag和新的资源数据，否则返回304状态码，表示没有发生任何变化。

• last-modified：表示资源上一次修改的时间

三、强缓存和协商缓存

在http中可以通过控制http响应头来控制http客户端的资源缓存，可分为两大类：强缓存和协商缓存

1、强缓存

强缓存是通过响应头的cache-control中的max-age等指令进行控制，max-age可设置强缓存的时间周期，在此周期内发送请求将直接从客户端缓存获取资源，而不会向服务器发送请求。

2、协商缓存

协商缓存可以通过响应头的ETag和last-modified进行控制，每次发送请求时，需要进行缓存新鲜度检验，如果资源过旧，那么直接从响应中获取新的资源返回状态码200 OK，否则从客户端缓存获取返回状态码304 Not Modified。新鲜度检验 通过请求头if-none-match（上一次请求的ETag）与响应头的ETag进行对比，或者请求头if-modified-since与响应头last-modified进行对比。

(1) if-none-match与ETag对比：每次发送请求就会携带上一次请求返回来的标识if-none-match发送到服务器，服务器进行校验标识，如果if-none-match跟服务器的ETag不相符合，那么就返回200状态码、最新的资源和新的资源标识。否则返回304状态码，从缓存中直接获取。

(2) if-modified-since与last-modified对比：每次发送请求的时候都会携带上一次内容更新的时间发送到服务器，服务器就会判断请求的资源有没有最新的修改，有就返回200状态码 OK并返回最新的更新时间和新的资源与标识，否则返回304状态码 Not Modified 直接从缓存拿数据。

（3） ETag和Last-Modified的区别

优先使用ETag

1、last-modified 的值只能精确到秒

2、文件如果每隔一段时间都会重复生成，但是内容相同。服务器就会检测到新的时间更新，last-modified都会每次返回200和新的资源文件与资源标识，即便内容相同。但ETag能判断出文件的内容相同，就会返回304，使用缓存。