06 浏览器缓存机制

1.什么是缓存？

2.缓存的分类

3.浏览器缓存

1.什么是缓存？

缓存是浏览器的一种机制，可以把请求过的web资源（html、css、js、图片等）拷贝一份副本存储在浏览器中，并根据请求配置选择是否使用该副本。

2.缓存的分类

缓存的作用：

• 减少网络带宽消耗
• 降低服务器压力
• 减少网络延迟，使页面的打开速度更快，增加用户体验

3.浏览器缓存

• 协商缓存
• 强制缓存

3-1 强制缓存

• HTTP1.0：Expires
• HTTP1.1 ：Cache-Control

判断过程：

请求再次发起 -> 浏览器根据 expires 和 cache-control 判断目标资源是否命中"强缓存" -> 若命中，直接从缓存获取资源，不再与服务器发生通讯。

Expires的缺点：

Expire已经被Cache-Control替代，原因在于Expires依赖于本地时间，它控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确；用户修改了本地时间）发生误差，那么强制缓存则会直接失效。

Cache-Control取值：

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）
• private：所有内容只有客户端可以缓存，Cache-Control的默认取值
• no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
• no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
• max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
• must-revalidate: 强制浏览器严格遵守你设置的cache规则
• proxy-revalidate: 强制proxy严格遵守你设置的cache规则

强制缓存流程

3-2 协商缓存

• HTTP1.0：Last-Modified && If-Modified-Since
• HTTP1.1 ：Etag && If-None-Match

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

1. 协商缓存生效，返回304
2. 协商缓存失效，返回200和请求结果。

协商缓存过程