HTTP缓存策略，强缓存、协商缓存

[habc0807]

浏览器缓存是前端面试的必问题？还不试试回答下，可以从强缓存和协商缓存解答。

[habc0807]

浏览器缓存静态资源的本质是HTTP协议的缓存策略，其中分为强缓存和协商缓存，两种缓存都可以将静态资源缓存到本地，强制缓存是根据过期时间来决定是用本地缓存还是请求新资源；协商缓存每次都要经过服务器对比后决定采用本地缓存还是返回新资源。使用哪种缓存，是由HTTP的请求头来决定的。

强缓存：采用 Expires，或者 cache-control:max-age=3600，来控制，这两者的区别是 Expires 是时期时间点，cache-control:max-age是一个时间跨度，Expires是http/1.0协议的产物，cache-control是http/1.1协议加入的特性。为什么要新添加这个特性，是因为 Expires 以服务器端时间为准，我们客户端的时间是可改变的，这样就可能会出现服务器端的时间和客户端时间不一致，客户端过期时间还是以服务器时间为过期时间点的问题。现阶段应该采用Expires的比较少了，大多采用cahe-control:max-age来做强缓存了，max-age可以精确的控制缓存，并且优先级高于 Expires。

协商缓存：我们可以给html资源的请求头设置 cache-control: no-cache; 由服务器端针对这个文件生成一个唯一标识叫Etag，Etag通过响应头发送到客户端，当客户端再次请求的时候，将Etag赋值给If-none-match，发送给服务器，在服务器端对比if-none-match 和 服务器端的Etag，如果Etag值没有变更，则返回304 Not Modified，客户端采用本地资源，如果Etag变更，则返回新资源，并将新Etag传给客户端。

强缓存使用场景：公共js\css\image等

协商缓存使用场景：html资源