HTTP缓存机制学习笔记

只见正门五间，上面桶瓦泥鳅脊；那门栏窗隔皆是细雕新鲜花样，并无朱粉涂饰；一色水磨群墙，下面白石台阶，凿成西番花草样；左右一望皆雪白粉墙，下面虎皮石随势砌去，果然不落富丽俗套。

Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。
浏览器缓存也包含很多内容： HTTP 缓存、cookie、localstorage 、sessionStorage、离线缓存（application cache）、Web SQL、indexDB。这里我们只讨论 HTTP 缓存相关内容。

HTTP缓存的分类：

浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下：

浏览器先根据这个资源的http头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。
如果未命中强缓存，则浏览器会将资源加载请求发送到服务器。服务器来判断浏览器本地缓存是否失效。若可以使用，则服务器并不会返回资源信息，浏览器继续从缓存加载资源。
如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。

1.强制缓存

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

HTTP缓存主要通过meta标签来定义：

<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />
<meta http-equiv="cache-control" content="no-cache">

不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求(跟第一次发起请求一致)

存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

Expires
　　Expires的值(是一个绝对值)为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。所以HTTP 1.1 的版本，使用Cache-Control替代。

Cache-Control

max-age=xxx ：单位s，缓存内容将在xxx秒后失效(是相对值)，该选项只有HTTP1.1可用，并如果和last-Modified一起使用时，优先级较高。
public : 所有内容都将被缓存（客户端和代理服务器都可储存）。
private : 内容只缓存到私有缓存中（仅客户端可缓存，代理服务器不可）。
no-cache : 协商缓存。
no-store : 禁止缓存，每次请求都要向服务器重新获取数据。

2.协商缓存

命中协商缓存的条件有两个：
（1）max-age=xxx 过期了：协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
（2）值为no-cache

协商缓存失效，返回200和请求结果

协商缓存生效，返回304

第一次访问.jpg

再次访问.jpg

　　通过两图的对比，我们可以很清楚的发现，在协商缓存生效时，状态码为304，并且报文大小和请求时间大大减少。原因是，服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端。
　　对于对比缓存来说，缓存标识的传递是我们着重需要理解的，它在请求header和响应header间进行传递，一共分为两种标识传递：

1.Last-Modified / If-Modified-Since
Last-Modified：
服务器在响应请求时，告诉浏览器资源的最后修改时间。

Last-Modified.png

If-Modified-Since：
再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。
服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。
若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；
若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

If-Modified-Since.png

2.Etag / If-None-Match（优先级高于Last-Modified / If-Modified-Since）
Etag：
服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。

Etag.png

If-None-Match：
再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。
服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，
不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

If-None-Match.png

既生强缓存何生强缓存？

强缓存有缺点呀，比如说，设置了expires，GMT格式，但是浏览器的时间可以改变，因此就通过cache-control返回一个相对时间来。但是假如说资源并没有更新，但是强缓存时间过期了，那就需要重新拉去资源，因此就有了last-modified，但是last-modified的时间单位是s，当1s内有资源修改，那浏览器返回的最后修改时间和上次的修改时间相同，那就不会重新拉取资源，因此推出了etag，通过比对资源内容来判断是否修改。

既生Last-Modified何生Etag？

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

总结：

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程如下：

浏览器第一次请求.png

浏览器再次请求时.png

完整的流程图

拓展一：点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

点击刷新按钮或者按 F5：浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
用户按 Ctrl+F5（强制刷新）: 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
地址栏回车：浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。

拓展二： `from memory cache`与`from disk cache`

第一次打开一个网站

关闭网页，再重新打开后

刷新页面后

从网页的Network栏进行观察：
第一次打开一个网页 –> 200 –> 关闭该网页 –> 再重新打开该页面–> 200(from disk cache) –> 刷新 –> 200(from memory cache)

一、浏览器Network的Size栏

在浏览器开发者工具的Network的Size栏会出现的三种情况：

from memory cache
from disk cache
资源本身大小（比如：3.6K）

二、三级缓存原理

内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性：
1.1 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
1.2 时效性：一旦该进程关闭，则该进程的内存则会清空。
硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

1、先查找内存，如果内存中存在，从内存中加载；
2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
3、如果硬盘中未查找到，那就进行网络请求；
4、加载到的资源缓存到硬盘和内存；

三、HTTP状态码及区别

200 form memory cache
不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache。
200 from disk cache
不访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。
304 Not Modified
访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。

状态	类型	说明
200	form memory cache	不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中
200	form disk ceche	不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等
200	资源大小数值	从服务器下载最新资源
304	报文大小	请求服务端发现资源没更新，使用本地资源

（一般样式表会缓存在磁盘中，不会缓存到内存中，因为css样式加载一次即可渲染出页面。但是脚本可能会随时执行，如果把脚本存在磁盘中，在执行时会把该脚本从磁盘中提取到缓存中来，这样的IO开销比较大，有可能会导致浏览器失去响应。

参考：
https://www.cnblogs.com/ranyonsue/p/8918908.html
http://www.cnblogs.com/chenqf/p/6386163.html https://heyingye.github.io/2018/04/16/%E5%BD%BB%E5%BA%95%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/