前端性能优化之浏览器缓存机制与缓存策略

前端性能优化之浏览器缓存机制与缓存策略

1. 浏览器缓存是一种简单有效的前端性能优化方式，这次主要谈谈浏览器缓存机制的——HTTP缓存（浏览器缓存机制四种之一： Memery Cache, Service Worker Cache, HTTP Cache, Push Cache）
2. HTTP缓存分为强缓存和协商缓存两种，其中强缓存的优先级最高，在浏览器没有命中强缓存的情况下，会选择协商缓存。

强缓存

1. 强缓存可以通过expires和cache-control控制，其中expires为过去所用，现在我们常用cache-control，来看下面这个请求
   
2. 可以看到在这个响应头里返回的expires设置为-1，表示值为当前服务器时间-1秒，即永远过期，通常我们可以值指定expires的值为 时间戳，表示过期时间，这样在下次再向服务器请求资源的时候，浏览器就会对比本地时间与expires的时间戳，从而得知是否要去浏览器缓存获得资源，否则会重新向服务器请求获得资源
3. 通过上面的描述可以发现expires依赖于本地时间，如果服务端与客户端设置的时间不同，或者手动改变了本地时间，就会出现问题，不能达到预期的效果。
4. 所以出现了cache-control，cache-control 服务器可以在HTTP响应中使用的标准指令
   Cache-Control: must-revalidate（必须重新验证）
   Cache-Control: no-cache（必须始终在使用原始服务器之前先经过原始服务器的验证）
   Cache-Control: no-store （不缓存）
   Cache-Control: no-transform（不得对资源进行任何转换）
   Cache-Control: public（可以被浏览器缓存，也可以被代理服务器缓存）
   Cache-Control: private（只能被浏览器缓存）
   Cache-Control: proxy-revalidate （类似于must-revalidate，但仅适用于共享缓存（例如代理）
   Cache-Control: max-age= （资源被视为新鲜的最长时间。不同于Expires，此指令是相对于请求时间的。）
   Cache-Control: s-maxage= （覆盖max-age或Expires标头，但仅适用于共享缓存（例如，代理）
   详情可以参见：MDN
5. 这时你可能会有一个疑问，为什么会同时设置expires和cache-control，设置expires是为了向下兼容，当同时存在expires和cache-control时，cache-control的优先级更高。

协商缓存

6. 如果启用了协商缓存，在首次请求时会在响应头里返回Last-Modified，这也是一个时间戳，之后再请求的时候客户端会带上If-Modified-Since这个字段，它的值就是Last-Modified，服务器会根据这个值和服务器上资源最后一次修改时间做比较，来判断是否需要响应请求内容，如果需要重新响应服务器就会返回最新的资源，并在响应头里重新设置一个Last-Modified，否则不会
7. 如果资源的修改时间变了，但是内容却没变，这是再利用Last-Modified来计算是否需要重新响应这无疑会带来资源浪费，所以Etag诞生了
8. Etag是服务器为资源生成的唯一资源编码（字符串），类似于MD5编码吧，在我们开发当中也会遇到文件编辑时间修改但是内容没变的情况，在提交的时候，这个文件也不会被提交，我想应该是类似的原理吧，如果文件内容相同Etag是不会变化的，所以在请求响应的时候通过If-None-Match带上这个Etag的值，服务器就可以更精准的判断资源是否更新了。