浏览器缓存机制

缓存

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。

缓存需要合理配置，不能缓存已过期的资源。

作用

• 重用已获取的资源，缓解服务器压力，有效的提升网站和应用性能
• web缓存减少延迟和网络阻塞，减少资源显示时间
• 借助HTTP缓存，站点更具响应性

缓存种类

缓存可分为两大类：私有缓存和共享缓存。

（私有）浏览器缓存

私有缓存只能用于单独用户。

（共享）代理缓存

共享缓存可以被多个用户使用。

HTTP缓存（浏览器缓存）

浏览器和服务器通信的方式是应答模式，浏览器发起HTTP请求，服务器响应请求。浏览器首次请求拿到的结果会根据响应报文中的HTTP缓存标识来决定是否缓存，如果是就会将返回结果和缓存标识存入浏览器缓存中，过程如下：

• 浏览器每次发起请求都会首先在缓存中查找该请求的结果以及缓存标识
• 根据缓存标识，浏览器会把请求结果和缓存标识存入浏览器缓存中

浏览器缓存机制的关键就是确保每个请求的缓存存入与读取。

缓存类型

浏览器缓存类型有两种：强缓存和协商缓存

强缓存

不会向服务器发送请求，直接从缓存中读取资源

协商缓存

向服务器发送请求，服务器会根据请求的request header的参数判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源

强缓存和协商缓存的共同点是，都是从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求

浏览器缓存过程

• 浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存
• 下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since 的请求；
• 服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回 200；
• 如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回 200；

用户行为对浏览器缓存的控制

• 地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制
• F5刷新，浏览器会设置max-age=0，跳过强缓存判断，直接进行协商缓存判断
• ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源