浏览器缓存静态资源的本质是HTTP协议的缓存策略，其中分为强缓存和协商缓存，两种缓存都可以将静态资源缓存到本地，强制缓存是根据过期时间来决定是用本地缓存还是请求新资源；协商缓存每次都要经过服务器对比后决定采用本地缓存还是返回新资源。使用哪种缓存，是由HTTP的请求头来决定的。
强缓存：采用 Expires，或者 cache-control:max-age=3600，来控制，这两者的区别是 Expires 是时期时间点，cache-control:max-age是一个时间跨度，Expires是http/1.0协议的产物，cache-control是http/1.1协议加入的特性。为什么要新添加这个特性，是因为 Expires 以服务器端时间为准，我们客户端的时间是可改变的，这样就可能会出现服务器端的时间和客户端时间不一致，客户端过期时间还是以服务器时间为过期时间点的问题。现阶段应该采用Expires的比较少了，大多采用cahe-control:max-age来做强缓存了，max-age可以精确的控制缓存，并且优先级高于 Expires。
协商缓存：我们可以给html资源的请求头设置 cache-control: no-cache; 由服务器端针对这个文件生成一个唯一标识叫Etag，Etag通过响应头发送到客户端，当客户端再次请求的时候，将Etag赋值给If-none-match，发送给服务器，在服务器端对比if-none-match 和 服务器端的Etag，如果Etag值没有变更，则返回304 Not Modified，客户端采用本地资源，如果Etag变更，则返回新资源，并将新Etag传给客户端。
强缓存使用场景：公共js\css\image等
协商缓存使用场景：html资源
由于打包后的js、css和图片，一般名称都带有hash值，名称中的hash变了，自然会拉取新文件，所以我们可以将这类文件设置为强制缓存，只要文件名不变，就一直缓存，比如缓存100天或者一年。
而html文件则不能设为强制缓存，一般html名称是没法带hash值的，所以html如果设置了强制缓存，则永远也没法更新，html不更新，其引用的js、css等名称也不会更新，则整个服务都没有更新，只能让用户清除缓存了。所以针对html文件，我们可以设置协商缓存或者直接不使用缓存，本身html文件都比较小，nginx配置如下。
server {
listen 80;
server_name yourdomain.com;
location / {
try_files $uri $uri/ /index.html;
root /yourdir/;
index index.html index.htm;
if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$)
{
expires 100d; //js、css、图片缓存100天
#add_header Cache-Control "max-age = 8640000"; //或者设置max-age
}
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "no-store"; //html不缓存
}
}
}
