前端协商缓存强缓存如何使用_前端性能优化之HTTP缓存机制

前言：缓存是指代理服务器或客户端本地磁盘内保存的资源副本。利用缓存可减少对服务器的访问，缩短响应时间，节省通信流量和通信时间，是前端性能优化中最常见的一种方法。

1. HTTP首部

HTTP协议的请求和响应报文中必定含有HTTP首部，首部内容为客户端和服务器分别处理请求和响应提供所需要的信息。

1.1 HTTP报文首部

1.1.1 HTTP请求报文

在请求中，HTTP报文由方法、URL、HTTP版本、HTTP首部字段等部分组成。

1.1.2 HTTP响应报文

在响应中，HTTP报文由 HTTP版本、状态码(数字和原因短语)、HTTP首部字段三部分组成。

1.2 使用缓存有关的HTTP首部字段1.2.1 Cache-Contral

public指令

Cache-Contral：public 指定public时，表明其他用户可利用缓存。复制代码private指令

Cache-Contral：private 指定private时，缓存是私有的。复制代码no-cache指令

Cache-Contral：no-cache 复制代码

使用no-cache指令的目的是为了防止从缓存中返回过期的资源。客户端请求中包含no-cache指令，表示客户端不接收缓存过的响应；服务器响应中包含该字段，表示缓存服务器不能对资源进行缓存。no-store指令

Cache-Contral：no-store 此字段表示有机密信息，不能缓存。复制代码s-maxage指令

Cache-Contral：s-maxage=604800(单位：秒)复制代码

s-maxage指令的功能和max-age指令的相同，不同点： s-maxage指令只适用于供多用户使用的公共缓存服务器。使用 s-maxage指令会忽略对Expires字段和max-age指令的处理。max-age指令

Cache-Contral：max-age=604800(单位：秒)复制代码

该字段表示资源缓存的最长时间。min-fresh指令

Cache-Contral：min-fresh=60(单位：秒)复制代码

例子：指定min-fresh 为60秒，表示在这60s内超过有效期限的资源都无法作为响应返回。max-stale指令

Cache-Contral：max-stale=3600(单位：秒)复制代码

未指定参数值，无论过多久，客户端都接收响应；如果指定了参数值，表示即使过期，只要在max-stale指定的时间内，仍然可以接收。

1.2.2 IF-Match

客户端请求首部中IF-Match字段，告知服务器匹配资源所用的实体标记(ETag)值。服务器会对比IF-Match字段值与资源的ETag值是否相同,如果值相同，则响应，返回状态码200；不相同，则返回412 Precondition failed (预处理错误)。

1.2.3 IF-None-Match

与IF-Match相反，服务器会对比IF-None-Match字段值与资源的ETag值是否不相同,如果值不相同，则响应，返回状态码200，返回新的资源和ETag；如果相同，则返回304 Not Modified。

1.2.4 IF-Modified-Match

IF-Modified-Match 是对比服务器资源在指定的时间之后是否更新过，如果更新，则响应，返回200以及新的资源和Last-Modified;如果没有更新，则返回304 Not Modified。

2. HTTP缓存机制

缓存分为强制缓存和协商缓存。

浏览器进行资源请求时，首先判断是否命中强缓存，如果命中，直接从本地读取缓存，不会向服务器发送请求；当强缓存没有命中时，会发送请求到服务端，判断协商缓存是否命中，如果命中，服务器不会返回资源，告诉浏览器从本地读取缓存。如何不命中，服务器直接返回资源。

2.1 强制缓存

和强制缓存有关的两个HTTP首部字段——Expires和Cache-Control。

Exprires的值是客户端第一次请求服务器时，返回的数据到期时间，该值是一个GMT时间格式的字符串，是一个绝对时间，但是客户端和服务器的时间可能有误差，所以此字段并不准确。

Cache-Control ，是利用max-age判断缓存的生命周期，是以秒为单位，如果在生命周期时间内，则命中缓存。还有其他属性，比如public，private，no-cache，no-store等，具体看第一节。

2.2 协商缓存

和协商缓存有关的字段有Last-Modified , If-Modified-Since 和 ETag , If-None-Match。

2.2.1 Last-Modified , If-Modified-Since

Last-Modified，服务端response返回实体头部部分，表示资源的最后更新时间。

If-Modified-Since，客户端请求首部带上此字段，对比服务器资源在指定的时间之后是否更新过，如果没有，则命中协商缓存，浏览器从缓存中读取资源；如果没有命中，资源有过修改，返回新的Last-Modified时间和服务器资源。但是，用此字段来判断有时是不准确的：修改了某些资源，但资源实际包含的内容并无变化；被修改的信息并不重要，如注释等；Last-Modified无法精确到毫秒，但有些资源更新频率有时会小于一秒。

2.2.1 ETag , If-None-Match

ETag，它是一种可将资源以字符串形式做唯一性标识的方式。

强ETag值和弱ETag值

强ETag值：发生非常小的变化都会改变ETag值。

弱ETag值：只有资源发生根本变化，才会改变ETag值，会在字段值前加上W/。

If-None-Match，客户端再次请求时会带上此字段，服务器会对比IF-None-Match字段值与资源的ETag值是否不相同,如果值不相同，则响应，返回状态码200，返回新的资源和ETag；如果相同，则返回304 Not Modified。

--END--

未完待续......

最后，祝愿大家身体健康，新年快乐，常洗手，多通风。

一点一滴积累，一步一步前进。分享工作中遇到的问题和日常琐事，欢迎关注公众号：南山zwl。