HTTP缓存机制与原理

时间 2019-12-07

原文原文链接

缓存前言css

Web缓存大体能够分为：数据库缓存、浏览器缓存、服务器缓存（CDN、代理服务器缓存）

而浏览器缓存也有不少方式，好比：HTTP缓存、localstrong、cookie等，下面将侧重于描述讨论一下HTTP缓存的相关话题。

缓存相对于浏览器来讲，我理解的意思让第二次请求一样的数据加载的更快，页面显示更快，减少二次请求给服务器带来的带宽等压力。html

浏览器与服务器之间通讯是经过HTTP报文发送及响应数据web

浏览器--------->服务器，发送请求(request)报文
服务器--------->浏览器，返回响应(response)报文

报文主要分为：数据库

头部（header）：定义缓存的规则明细
主体（body）: HTTP请求输送的数据

缓存规则解析后端

两种方式：强制缓存与协商缓存浏览器

区别解析：强制缓存若是命中缓存不须要与服务器发生交互，而协商缓存不论是否命中都要和服务器发生交互，并且强制缓存的优先级高于协商缓存缓存

1.强制缓存服务器

在强制缓存数据未失效的状况下，浏览器能够直接使用缓存的数据，那么浏览器是怎么判断强制缓存的数据失效了没有呢？



浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回，缓存规则信息包含在响应header中，

对于强制缓存来讲，响应header中会有两个字段来标明失效规则（Expires/Cache-Control）

expirescookie

Expires 指缓存过时的时间，超过了这个时间点就表明资源过时。google

有一个问题是因为使用具体时间，若是时间表示出错或者没有转换到正确的时区均可能形成缓存生命周期出错。而且 Expires 是 HTTP/1.0 的标准，如今更倾向于用 HTTP/1.1 中定义的 Cache-Control。两个同时存在时也是 Cache-Control 的优先级更高。

Cache-Control

Cache-Control 主要有如下属性：

max-age ：指定一个时间长度，在这个时间段内缓存是有效的，单位是s。
private : 代表响应只能被单个用户（多是操做系统用户、浏览器用户）缓存，是非共享的，不能被代理服务器缓存
public ：代表响应能够被任何对象（发送请求的客户端、代理服务器等等）缓存
no-store ：禁止缓存，每次请求都要向服务器从新获取数据。
no-cache : 须要使用协商缓存来验证缓存数据

2.协商缓存

须要进行比较判断是否可使用缓存，浏览器和服务器端经过某种验证机制验证当前请求资源是否可使用缓存。

浏览器第一次请求数据以后会将数据和响应头部的缓存标识存储起来。再次请求时会带上存储的头部字段，服务器端验证是否可用。若是返回 304 Not Modified，表明资源没有发生改变可使用缓存的数据，获取新的过时时间。反之返回 200 就至关于从新请求了一遍资源并替换旧资源

Last-modified / If-Modified-Since

Last-modified: 服务器端资源的最后修改时间，响应头部会带上这个标识。第一次请求以后，浏览器记录这个时间，再次请求时，请求头部带上 If-Modified-Since 即为以前记录下的时间。服务器端收到带 If-Modified-Since 的请求后会去和资源的最后修改时间对比。若修改过就返回最新资源，状态码 200，若没有修改过则返回 304。

Etag/If-None-Match

优先级高于Last-Modified / If-Modified-Since

由服务器端上生成的一段 hash 字符串，第一次请求时响应头带上 ETag: abcd，以后的请求中带上 If-None-Match: abcd，服务器检查 ETag，返回 304 或 200。

关于 last-modified 和 Etag 区别：

某些服务器不能精确获得资源的最后修改时间，这样就没法经过最后修改时间判断资源是否更新。
Last-modified 只能精确到秒。
一些资源的最后修改时间改变了，可是内容没改变，使用 Last-modified 看不出内容没有改变。
Etag 的精度比 Last-modified 高，属于强验证，要求资源字节级别的一致，优先级高。若是服务器端有提供 ETag 的话，必须先对 ETag 进行 Conditional Request。

应用场景；

能够考虑缓存的内容：不常常发生内容变更

css样式文件
js文件
logo、图标
html文件
能够下载的内容

不该该被缓存的：

数据常常发生变更，敏感的一些请求（GET）

结语：

这里参考线上的一些相关文章作了个总结，实际使用 HTTP 缓存须要后端配合配置，具体状况具体对待。

参考文章：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn#etag

http://www.alloyteam.com/2016/03/discussion-on-web-caching/#prettyPhoto

https://zhuanlan.zhihu.com/p/29750583