HTTP缓存《性能优化第四篇》

图解：

hosts文件夹所在路径C:\Windows\System32\drivers\etc

步骤：

1. 常见HTTP缓存只能缓存GET请求响应的资源，不能别的请求方式
2. HTTP缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在响应头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到请求头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源

强制缓存和协商缓存：

强制缓存：

1. 强制缓存如果生效，不需要再和服务器发生交互；而协商缓存不换是否生效，都需要和服务器发生交互。
2. Expires和Cache-Control，用来表示资源的缓存时间
   Expires：HTTP1.0属性如果时间没过期，不发起请求，使用本地缓存，优先级低（为了兼容）
   Cache-Control：HTTP1.1属性，属性值：
   no-store：所有内容都不缓存；
   no-cache：缓存，但是浏览器使用缓存前，都会请求服务器判断缓存资源是否是最新。
   max-age：单位秒，请求资源后的xx秒内不再发起请求。属于HTTP1.1属性，与Expires类似，但优先级要比Expires高。
   s-maxage：单位秒，代理服务器请求源站资源后的xx秒内不再发起请求，只对CDN有效。
   public：客户端和代理服务器（CDN）都可缓存。
   private：只有客户端可以缓存。

协商缓存：

1. 属性有Last-Modified/If-Modified-Since、ETag/If-Not-Match，请求头和响应头需要成对出现
2. Last-Modefied： 响应头的缓存字段。资源最新修改时间，由服务器告诉浏览器。
   if-Modified-Since：请求头的缓存字段。资源最新修改时间，由浏览器告诉服务器，和Last-Modefied是一对，它两会进行对比。（其实就是上次服务器给的Last-Modified，请求又还给服务器对比）
   Etag：响应头的缓存字段。资源标识，由服务器告诉浏览器。
   if-None-Match：请求头的缓存字段。资源标识，由浏览器告诉服务器，和Etag是一对，它两会进行对比。（其实就是上次服务器给的Etag，请求又还给服务器对比）

ETag：HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

• Last-Modified标注的最新修改时间只能精确到秒，如果某些文件在1秒以内被多次修改的话，它将不能准确标注文件的修改时间；
• 如果某些文件是被定期生成的话，内容没有任何改变，但Last-Modified却变了，导致文件无法再使用缓存；
• 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形；
• ETag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识，ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化，ETag值的变更则说明资源状态已经被修改，ETag能够更加准确地控制缓存。Last-Modified是可以与ETag一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

私有缓存只能用于单独的用户。Cache-Control: Private

共享缓存可以被多个用户使用。Cache-Control: Public

HTTP缓存使用

• <meta http-equiv="Cache-Control" content="max-age=7200" />

• <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />

• 但是不能缓存图片等

• nginx代理服务器和后端都可以设置

• vue中使用keep-alive实现缓存

• 思考？meta标签中没有见到使用？nginx的时候如何使用？