浏览器缓存相关

  常用到的缓存有：浏览器缓存，DNS缓存，服务器缓存。总结下前端优化中常用到的浏览器缓存。

  expires和cache-control用于本地缓存，Last-Modified和Etag用于协商缓存。

  expires是http1.0定义的，是一个具体的日期时间，使用时，需要服务器和PC时钟同步，cache-control是http1.1定义的，是一个相对时间，相对时间就不必要求时钟同步了。cache-control的max-age是一个秒数，若与expires同时存在，则cache-control生效。若判断本地缓存没有过期，会直接从缓存读取，不发送新的请求。若缓存过期，重新请求。

  Last-Modified和Etag用于判断服务器文件是否有更新。Last-Modified是一个具体日期时间，Etag是一个字符串。请求头中与之相对应的是If-Modified-Since和If-None-Match。Etag比Last-Modified更精细。首次请求没有对应信息，之后的请求，到服务器端会判断，若标识相同，说明文件没有更改，返回304，浏览器接收到304会从缓存中读取，缓存命中；若有更改，将返回新资源。

  若用户使用F5刷新页面，无论expires和cache-control是否过期，都不会生效，但Last-Modified和Etag会有效；使用ctrl+F5刷新时，Last-Modified和Etag也无效，会强制从服务器下载资源。

  总体而言，在服务器配置正确的情况下，

通过有效期控制 Expires / Pragma / Cache-Control 优点：浏览器不需要访问Server来验证资源状态 缺点：不够准确，指定的缓存时间段内浏览器默认不会再次请求资源，当产生紧急外网bug时发布的资源无法及时更新到浏览器端。

通过资源状态控制 Last-Modified + If-Modified-Since / ETag + If-None-Match 优点：缓存控制比较精确，随时发布随时生效。 缺点：即使资源已存在于浏览器本地缓存中，也需要请求一次服务器验证资源状态以验证缓存有效性