浅析浏览器缓存

通过最近一段时间的pc开发, 总结一下自己对浏览器缓存的认知, 熟练的掌握浏览器缓存, 可以加快页面加载速度, 提升用户体验.在开始前, 大家需要对以下知识点了解:

http status:200,200(from disk/memory cache),304,404等
强缓存（Pragma、Expires，cache-control）
对比缓存（If-None-Match/Etag ,If-Modified-Since/Last-Modified)

Pragma与Expires是http1.0时，用来控制强缓存:
Pragma:no-cache,代表此资源不会被浏览器从缓存中取，每次从服务器获取，返回状态码为 200；(现在浏览器基本上全在用http1.1，所以此属性基本上不再用)
Expires: Wed, 12 Jul 2017 06:23:33 GMT,值为一个格林时间，代表着此资源过期时间，浏览器会比较当前时间与此时间（此时间是相对服务器时间，如果修改了客户端时间,则这个比较就不准确），如果没有超过，则使用缓存，返回200（from cache）
cache-control是http1.1时，用来控制强缓存，更好的解决Expires不严谨的问题。
cache-control:public，代表此资源可以缓存在代理服务器上，供多个客户端共享
cache-control:private,代表此资源只能供客户端缓存
cache-control:max-age=3600，代表3600秒后再次请求此资源，此资源缓存失效
cache-control:no-cache，强缓存失效，需要去判断对比缓存
cache-control:no-store,强缓存与对比缓存均失效，需要请求服务器资源
以上3个字段优先级：Pragma>cache-control>Expires

If-None-Match/Etag ,If-Modified-Since/Last-Modified，是用来控制对比缓存的，
其中：
If-Modified-Since/Last-Modified值为一个格林时间，Last-Modified代表此资源在服务器上最后一次修改时间，If-Modified-Since存着上一次请求服务器获取该资源，该资源的最后一次修改时间，当我们进行对比缓存的时候，就会比较If-Modified-Since/Last-Modified这2个时间，如果Last-Modified大于If-Modified-Since，说明资源又发生了新的改变，此时获取最新资源，并返回200，反之代表资源未发生改变返回304，继续使用缓存的资源。（需要注意可能资源在1秒内发生了多次改变，那么就会出现服务器认为资源未发生改变继续返回304，或者资源定期生成，但内容未发生改变，这个时候服务器就会认为发生改变，重新请求）。
If-None-Match/Etag值是基于对应资源生成的唯一标识符，更好的解决If-Modified-Since/Last-Modified不严谨的问题。If-None-Match存着上一次请求服务器获取该资源，该资源对应的Etag值，当我们进行对比缓存的时候，就会比较If-None-Match与Etag值是否相等，相等代表此资源未发生改变，返回304，反之重新请求此资源返回200。(但是需要注意如果服务器采用分布式负载均衡时，每台服务器对同一个资源生成的Etag值可能会不相同，导致比较Etag与If-None-Match不相同，重新请求资源)。
以上2组优先级：If-None-Match/Etag >If-Modified-Since/Last-Modified
结合着以上内容我们可以得到如下结论：

一． 当浏览器第一次请求资源的时候，因为无缓存，所以服务器成功返回此资源，状态码为200，并且此时返回Expires ,cache-control,Etag, Last-Modified

image.png

image.png

二． 当浏览器第二次请求该资源时，因为有缓存，浏览器首先会判断强缓存是否有效，判断规则如上所述，如果强缓存有效，返回200（from cache）,如果此时强缓存失效，就会进行对比缓存，判断对比缓存是否失效，判断规则如上所述，如果对比缓存有效，返回304（not modified）,如果失效，就会请求服务器获取最新资源，此时状态码为200，同时返回新的Expires ,cache-control,Etag, Last-Modified

image.png

image.png

image.png

image.png

PS：200from cache可以分为2种，(from disk/memory cache)，顾名思义我们可以得出，前者是从磁盘中获取缓存，后者是从内存中获取缓存，一般来说，html/js/css这类资源当属于200from disk cache，而像比如html中所用的图片和字体引用资源来自于memory cache，磁盘缓存当进程关闭，仍会存在，而内存缓存会在进程关闭后清空。
如下：
Js/html/css

image.png

image.png

Img/font

image.png

image.png

最后结合我们经常对浏览器页面操作，来看缓存：
当我们第一次请求页面后，在地址栏后按Enter键的时候，不会影响Expirse和cache-control，If-None-Match/Etag >If-Modified-Since/Last-Modified

image.png

image.png

当我们第一次请求页面后，按F5刷新，Expirse和cache-control失效，不会影响If-None-Match/Etag >If-Modified-Since/Last-Modified

image.png

image.png

当我们第一次请求页面后，按Ctrl+F5刷新， Expirse和cache-control，If-None-Match/Etag >If-Modified-Since/Last-Modified均会失效

image.png

image.png

最后我们可以在html的meta标签内禁用所有缓存, 可是如果加了这个标签,那么代表着此html本身就不允许缓存, 那么我们再谈浏览器缓存就没有意义了, 如图:

image.png

以上就是本人对于浏览器缓存的理解, 欢迎一起讨论交流.