强缓存与协商缓存

缓存

浏览器缓存 是浏览器将用户请求过的静态资源（html、css、js），存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载了，不需要再去服务端请求了。

在工作中，将前端代码发布到静态服务器上时，需要对这些静态资源做一些运维配置。

其中设置gzip和缓存必不可少，这两项直接影响到网页性能与用户体验。

缓存的优点：

• 减少不必要的数据传输，节省带宽。
• 减少服务器的负担，提升网站性能。
• 加快客户端加载网页的速度。

缓存的缺点：

• 资源如果有变更，但是客户端没有及时更新的话，会造成用户获取信息滞后。

因此，为了避免设置缓存错误，掌握缓存的原理是非常有必要的。

缓存规则

• 强缓存
• 协商缓存

强缓存

如果缓存资源没有过期，就用缓存的资源。

如果缓存资源过期了，就去请求服务器。

如何判断资源是否过期呢？

答：主要是看 response headers 中的 Cache-Control 的值。

图中的max-age = 31536000秒（1年），就是说在这些秒内，都直接使用缓存，超过了就继续请求服务器。

而和 Cache-Control 并列的，还有一个 expires ，已经基本淘汰了，所以不用管。

Cache-Control 的几个取值含义：

• private： 仅浏览器可以缓存
• public： 浏览器和代理服务器都可以缓存
• max-age=xxx，过期时间（重要）
• no-cache，不进行强缓存（重要）
• no-store 不强缓存，也不协商缓存

这些规则可以同时多个，之间使用逗号隔开。

对于强缓存，我们主要研究 Cache-Control 中的** max-age 和 no-cache**。

判断该资源是否命中强缓存，就看 response 中 Cache-Control 的值。

如果有max-age=xxx，则命中强缓存。

如果Cache-Control的值是no-cache，说明没命中强缓存，走协商缓存。

max-age = 0 和 no-cache 有啥区别？

答：no-cache直接不进行强缓存，让你去走协商缓存。而max-age=0是进行强缓存，但是过期了。实际上看起来两者效果是一样的。

协商缓存

触发条件：

• Cache-Control 的值为 no-cache （不强缓存）
• 或者 max-age 过期了 （强缓存，但总有过期的时候）

不管怎样，最后都要进行协商缓存（no-store除外）

上述图，虽然强缓存命中，但是也有 ETag 和 Last-Modified ，这两个就是协商缓存的相关规则：

• ETag：每个文件有一个，改动文件了就变了，可以看似md5。

• Last-Modified：文件的修改时间。

每次http返回来 response header 中的 ETag和 Last-Modified，在下次请求时在 request header 就把这两个带上。服务端把你带过来的标识，资源目前的标识，进行对比，以此来判断资源是否更改了。

缓存表在每次请求成功后都会更新规则。

协商缓存步骤总结：

• 请求资源时，把用户本地该资源的 ETag 同时带到服务端，服务端和最新资源做对比。
• 如果资源没更改，返回304，浏览器读取本地缓存。
• 如果资源有更改，返回200，返回最新的资源。