HTTP缓存详解

除 HTTP 缓存之外，Web 性能优化还有很多其他途径，比如预加载和预渲染、脚本异步载入等

缓存的原因

• 减少服务器负载
• 降低延迟，加速页面的载入
• 降低了用户的带宽，减少了流量消耗
• 减少了冗余的数据传输

缓存相关的字段

通用头cache-control

• private:表示仅UA可缓存，中间节点不允许缓存
• public:表示大家都可以缓存，响应可被任何中间节点缓存
• no-cache:表示不使用Cache-Control的缓存控制方式做验证，而是使用ETag/Last-Modified字段来控制缓存
• no-store:表示不缓存任何东西，浏览器会直接向服务器请求原始文件，并且请求中不附带 ETag 参数(服务器认为是新请求)
• max-age:表示当前资源的有效时间，单位为秒

request header

• if-none-match:浏览器在下一次发送请求时，会将上一次返回的Etag值放到If-None-Match里
• if-modified-since:浏览器在下一次发送请求时，会将上一次返回的last-modified的值放到If-Modified-Since里

response header

• ETag:只要资源有变化，就会重新生成ETag
• Expires:过期时间
• last-modified:资源最后一次更改时间

缓存过程详解

• 在我们第一次发送请求的时候，如果请求成功，服务器会返回资源以及状态码200，如果服务器没有关闭缓存，也会返回ETag,Expires,Last_Modified

• 后续请求的时候，浏览器会根据Expires/Cache-Control来判断是否过期，区别就在于Expires是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires，Cache-Control是为了解决Expires时间差的问题而出现的，Expires:描述的是一个绝对时间，根据的是客户端时间，如果客户端时间被更改，就会失效

• 如果未过期，则命中强缓存，直接从本地读取，如果过期，则会判断ETag/Last-Modified是否存在，ETag的优先级比Last-Modified高， ETag是为了解决一个缓存文件在短时间内被多次修改的问题，而Last-Modified只能精确到秒

• 如果有ETag， 则会将服务器上次返回ETag赋值给if-none-match，然后判断与服务器的ETag是否一致，如果一致，则表示资源文件没有发生改变，命中协商缓存，服务器返回304，如果不一致，则返回新的ETag，资源以及状态码200

• 如果没有ETag， 则会将服务器上次返回last-modified赋值给if-modified-since，然后判断与最后一次的修改时间是否一致，如果一致，命中协商缓存，服务器返回304，如果不一致，则返回新的last-modified，资源以及状态码200

参考文章推荐：
细说 HTTP 缓存机制