缓存是性能优化的一个重要策略，而HTTP缓存是比较常见的缓存方案。文章从缓存原理、应用场景和实现方式三个方面对HTTP缓存进行介绍。
1. 原理 1.1. 强缓存浏览器第一次请求资源后缓存到本地，下次请求时浏览器判断本地缓存资源是否过期，如果未过期就返回缓存数据，否则请求服务器获取新资源。
通过HTTP/1.0的Expire和HTTP/1.1的Cache-Control字段实现。
Expire是通过绝对时间来判断缓存失效的，所以当服务器和浏览器所在时区不同时，校验结果是不准确的；
Cache-Control使用max-age相对时间，解决了Expire存在的问题。
Cache-Control还可以实现更小粒度的缓存控制：
public：客户端和代理服务器都可以缓存。private：只允许浏览器缓存，代理服务器不能缓存。no-cache：不允许使用强缓存。no-store：不允许使用缓存。s-maxage：类似max-age，指定代理服务器缓存过期时长。 1.2. 协商缓存浏览器第一次请求服务器，服务器会在响应头字段加上缓存tag，后续请求中如果未命中强缓存(过期或强制不使用)，浏览器就会带上缓存tag请求服务器，服务器会根据这个缓存tag来决定资源是否更新。如果资源未更新则返回304，浏览器可以直接使用本地缓存；否则返回200和新资源。
缓存tag分两种：
资源文件更新时间：服务器返回时设置Last-Modified，浏览器请求时设置If-Modified-Since。
资源唯一标识：服务器返回时设置ETag头字段，浏览器请求时设置If-None-Match头字段。
Last-Modified VS ETag ：
精度上 ETag优于Last-Modified： 1. 编辑了资源文件，Last-Modified更新了，但是文件内容并没有更改，会造成缓存失效；2.Last-Modified 的时间精度是秒，如果文件在 1 秒内改变了多次，此时 Last-Modified 并没有体现出修改了。性能：Last-Modified只需要记录一个时间点，而 Etag需要根据文件的具体内容计算哈希值。优先级：两者同时存在时，服务器会优先选择ETag。 2. 应用场景 2.1. B站 html：no-cacheJS文件：max-age=31536000(1年)CSS文件：max-age=31536000图片：max-age=31536000 2.2. 淘宝 html：no-cachejs文件：max-age=2592000(一个月),s-maxage=86400；max-age=0CSS文件：max-age=2592000,s-maxage=3600图片：max-age=15552000 2.3. 新浪 html： max-age=60js文件：max-age=31536000；max-age=14400；max-age=3600CSS文件：public, max-age=14400图片：max-age=31536000(一年)总结：
对于一个页面来说，html部分的特点是：内容重要并且更新频繁，所以适合协商缓存，但对于并发量大的页面，也可以使用有效期较短的强缓存；而js、css和图片等静态文件，一般变更少，而且内容更新后可以重新命名文件进行刷新，适合强缓存。
3. 实现方式默认情况下，浏览器会对静态资源使用强缓存，对html禁止强缓存(请求时 max-age=0)。
3.1. 文档缓存通过 meta标签 的http-equiv和content来设置报文头：Cache-Control和Expires。
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" /><meta http-equiv="Cache-Control" content="max-age=7200" /> 3.2. nginx缓存当使用nginx作为静态资源服务器时，可以进行缓存配置。
我们可以通过nginx配置来保证浏览器的默认缓存行为是一致的。
# 禁止html使用强缓存location ~.*.html${ # 禁止使用强缓存(不一定就会协商缓存) add_header Cache-Control no-cache; # 作用跟Cache-Control no-cache一致；兼容HTTP/1.0 add_header Pragma no-cache;}# 对于更新不频繁的，或者更新后文件名改变的(加上版本号)，可以强缓存location ~.*.(js|css|png|jpg)${ expires 365d;}# 对于更新相对频繁且比较重要的脚本，可以把强缓存有效时间控制在一天内，强缓存失效后进行协商缓存。location ~.*consult.js${ expires 86400s;}