概述
缓存策略
浏览器缓存策略分为两种：
- 强缓存
- 协商缓存
相同点
如果命中，都是从缓存中加载资源
不同点
协商缓存会向服务器发起请求去验证是否命中缓存，而强缓存不需要发送请求
基本原理
- 浏览器加载资源时候，会根据请求头的expire和cache-control判断是否命中强缓存，是则从缓存中读取资源，不会发送请求到服务器
- 如果没有命中强缓存，浏览器就会携带
if-None-Match：上一次Etag的值和if-Modified-Since: 上一次last-modified的值，发送请求到服务器，验证是否命中协商缓存，如果命中，则继续从缓存中读取资源 - 如果没有命中缓存，则直接从服务器加载资源
强缓存
Expires
Expires: Wed, 11 May 2018 07:20:00 GMT
Expires是HTTp/1.0控制网页缓存的字段，其值是服务器返回改请求结果缓存的到期时间，是个绝对时间。
Expires控制缓存的原理，是使用客户端的时间与服务器端返回的时间做对比，如果客户端与服务器端的时间发生误差（如时区不同，修改了客户端时间），那么强缓存就会失效。
Cache-Control
Cache-Control : cache-directive
为了解决Expires的问题，在HTTP/1.1中提出了Cache-Control用于控制网页缓存
主要取值
| cache-directive | desc |
|---|---|
| public | 资源将被客户端和代理服务器缓存 |
| private | 资源仅被客户端缓存 |
| no-store | 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存 |
| no-cache | 相当于max-age=0;must-revalidation即资源被客户端缓存，但是是否使用缓存则需要经过协商缓存来决定 |
| max-age | 缓存资源，但是在指定时间（s） 后缓存过期 |
| s-maxage | 同上，以来public设置，覆盖max-age，且旨在代理服务器上有效 |
| max-stale | 指定时间内，几时缓存过期时，资源依然有效 |
| min-fresh | 缓存的资源至少要保持指定时间的新鲜期 |
| must-revalidation/proxy-revalidation | 如果缓存失效，强制重新向服务器发起验证（因为max-stale等字段可能改变缓存的失效时间） |
| only-if-cache | 仅返回已经缓存的资源，不妨问网络，如果没有缓存则返回504 |
| no-transform | 强制要求代理服务器不要对资源进行转换，禁止代理服务器对content-Encoding content-range content-type字段的修改，因此代理的gzip压缩将不被允许 |
Expires和Cache-Control:max-age=xxx 的作用是差不多的，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物。
两者同时存在的话，Cache-Control优先级高于Expires；
在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法
浏览器缓存存放位置
| 状态 | 类型 | 说明 |
|---|---|---|
| 200 | from memory cache | 不请求网络资源，资源在内存中，一般为脚本、字体、图片 |
| 200 | from disk cache | 不请求网络资源，在磁盘中，一般为非脚本。如css等 |
| 200 | 资源size | 从服务器下载最新的资源 |
| 304 | 报文size | 请求服务端发现资源没有更新，使用本地资源 |
本地缓存分为内存缓存（from memory cache）和硬盘缓存（from disk cache）
内存缓存
内存缓存具有两个特点：
- 快读读取： 内存缓存会将编译解析后的文件直接存入改进程的内存中，占据该进程一定的内存资源，方便下次运行使用时的快速读取
- 时效性： 一旦该进程关闭，则该进程的内存会清空
硬盘缓存
硬盘缓存是直接将缓存写入硬盘中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存（memory cache）慢
协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存。
控制协商缓存的字段分别为： Last-Modified/if-Modified-Since
和 Etag/if-None-Match
其中 Etag/if-None-Match的优先级更高
Last-Modified / if-Modified-Since
Last-Modified 是服务器响应请求时，返回该资源文件在服务器最后被修改的时间
// Last-Modified: 星期,日期 月份 年份 时:分:秒 GMT
Last-Modified: Tue, 04 Apr 2017 10:01:15 GMT
if-Modified-Since则是客户端再次发起该请求时，携带上次返回的 Last-Modified值。
当服务器收到该请求，并且发现请求头有if-Modified-Since字段时，就会将该值与该资源在服务器的最后修改时间做对比，如果有更新就重新返回资源，状态码为200；如果没有更新，则返回304，继续使用缓存文件
Etag / If-None-Match
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成）
ETag:"fcb82312d92970bdf0d18a4eca08ebc7efede4fe"
If-None-Match是客户端再次发起该请求时，携带上次请求返回的Etag值
当服务器接收到请求，并且发现请求头有If-None-Match时，就会将该值与资源在服务器的Etag值做对比，一致则代表资源没有更新，返回304，使用缓存文件；不一致则重新返回资源文件，状态码为200
禁止浏览器缓存
设置请求头
Cache-Control: no-cache, no-store, must-revalidate
给请求资源增加一个版本号/随机数
<script src="index.js?v=1.0"></script>
HTML中禁用缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
