浏览器缓存策略

1. 如果response header指示不缓存，则不会缓存
2. 如果请求是需要认证的请求或者是通过https，则不会缓存
3. 先进行缓存新鲜度验证（expires, max-age）
4. 如果缓存不新鲜，再进行有效度验证（ETag, Last-Modified）
5. 如果缓存有效则返回304，无效则从服务器获取资源

其中最重要的就是新鲜度验证（freshness）和有效度验证（validate）；如果既没有新鲜度验证，又没有有效度验证，则认为是不可以缓存的。

新鲜度freshness

A response's freshness lifetime is the length of time between its
generation by the origin server and its expiration time.

定义：在资源过期时间内为fresh response,详情点击这里。可以定义资源过期时间的请求头包括：Pragma, Expires, Cache-Control的max-age。

• Expires的值是一个绝对时间，Cache-Control是一个相对时间，表示从当前起多少秒
• 同时设置优先级为Cache-Control > Expires

有效度validate

如果资源被判定为不新鲜，这时候资源仍然可能是有效的，浏览器提供了有效度验证。起作用的请求头包括：ETag/f-None-Match 和 Last-Modified/If-Modified-Since，详情点击这里

• ETag是资源的哈希值，Last-Modified为资源最后修改时间
• 优先级ETag > Last-Modified
• 与用户操作的关系

image.png

在某篇文章，我模拟了Cache-Control的作用，要看到缓存的效果必须重新打开新的标签，原因就是刷新对Expires/Cache-Control无效

缓存最重要的策略

1. 对于大文件实行长时间的新鲜度保存，比如对图片等静态资源设置Cache-Control: max-age=31536000
2. 如果这些静态资源要修改，则通过改变静态资源的名字（可以给名字添加hash值），由于名字已改，浏览器就会认为是新的资源。这样就可最大限度使用缓存

缓存的作用

1. 减少页面加载时间
2. 减少服务器负载

参考资料

http://www.alloyteam.com/2012/03/web-cache-2-browser-cache/
https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
https://excaliburhan.com/post/things-you-should-know-about-browser-cache.html
https://www.mnot.net/cache_docs
https://tools.ietf.org/html/rfc7234