除 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 缓存机制
网友评论