前言随着项目越来越大，即使使用代码压缩工具压缩文件大小，js文件也不可避免地会越来越大。对于用户来说，每次重新下载都可能会消耗大量的时间，导致我们的首屏长时间显示空白。为了提高网站性能，有效使用缓存可以改善用户体验，提高访问效率。浏览器缓存了HTML中的Meta标签http-equiv属性，相当于http文件头中的参数，content的内容就是对应参数的值但是设置pragma:no-cache不适用于HTTP1.1及以上规范，而且因为这个方法太老了，如果你不用估计那些洪荒客户的感受，根本加不上？当然不能用太多，还有其他参数可以选择使用但是meta标签设置的参数优先级低于http请求中声明的。如果同时设置了httpheader，那么就不需要添加meta标签了。当然最后还有一个很重要的点，就是根据叉烧包的实验，可以说meta公式的内容基本没用了:)悲催的故事……当然，你的浏览器可能仍然可以使用它。Header参数是最安全的显然配置Header参数可以保证资源的缓存。Cache-ControlCache-Controlheader是在HTTP/1.1规范中定义的，它取代了之前用于定义响应缓存策略的Expires等header。所有现代浏览器都支持缓存控制。max-age指的是从请求开始允许缓存有效的最长时间（单位是s）。public可以被任何对象缓存。没有必要，因为显式的缓存信息已经表明响应可以被缓存。private通常只为单个用户缓存，不允许中间缓存缓存它。no-cache表示必须先与服务器确认返回的响应是否发生了变化。no-store禁止浏览器和所有中间缓存存储返回响应的任何版本。每个请求都必须重新下载。借用谷歌爸爸的一张图来展示Cache-Control的选择策略。Expires表示缓存过期的绝对时间。在HTTP/1.0中实现，优先级低于HTTP/1.1中的Cache-Control。它的缺点是如果服务端和客户端之间的误差很大，那么它的误差也会变大。Last-Modified标记是资源的最后修改时间，需要和Cache-Control配合使用。只能精确到秒级。如果某些文件在1秒内被多次修改，则ETag无法及时更新，相当于验证令牌。它支持高效的资源更新检查：如果资源未更改，则不会传输任何数据。ETag通常是服务器生成的哈希值或文件内容的其他指纹。如果请求时指纹还是一样，说明资源没有变化，可以跳过下载。参数弃用小指南如果不考虑ie6和HTTP1.0客户端，那么可以忽略PragmaCache-Control:no-store,must-revalidateExpires:0如果不打算管理HTTP1.0代理，那么可以忽略ExpiresCache-Control:no-store,must-revalidate如果服务器自动包含有效的Date标头，理论上也可以省略Cache-Control并仅依赖Expires。但是，如果客户端和服务器的时间有差异，可能会失败Date:Wed,24Aug201618:32:02GMTExpires:0一般来说，最好使用Cache-Control（如果你这样做不打算考虑HTTP1.0)项目实践Updatefiles&deprecatecache在项目中，当我们使用localcache时，会遇到另一个问题——如何更新文件和deprecatecache。通常，我们通过对文件名进行指纹识别来做到这一点。以webpack为例，在编写配置文件时，{output:{filename:"bundle.[hash].js"}}为打包后的文件名添加一个hash，这样文件被打包后会生成一个新的hash更新后达到弃用原缓存的效果。自定义缓存策略可以针对不同类型的文件定义不同的缓存策略，以达到最高效的效果。HTML被标记为“无缓存”，这样浏览器每次请求时总是会重新验证文档，并且在内容有变化时可以及时获取最新版本，即使有新的资源下载。允许浏览器和中间缓存（如CDN）缓存CSS，并设置CSS一年后过期。较长的缓存时间可以让用户避免每次都从服务器获取响应。同时不要忘记在文件名上加上指纹，以便及时更新和更改。JavaScript也设置了1年后过期，但标记为私有，因为它可能包含一些用户私有数据，这些数据不应该被CDN缓存。缓存的图像没有版本或唯一指纹，并设置为1天后过期。其他技术减少对cookies的依赖，因为每次HTTP请求都会带上cookies，会增加传输流量（当然在其他域名下挂载静态资源也可以达到免cookie的效果）
