浏览器的缓存机制

浏览器的缓存机制分为强制缓存及协商缓存两种方式。我们将按照打开网页的顺序来介绍浏览器缓存机制的执行过程。

第一次打开浏览器

当浏览器第一次打开页面的时候，会触发强缓存机制，将页面的数据直接缓存到本地。并且，在后台发送的响应头中，包含一个时间有效数据，一般为**Expires 或者 Cache-control，这个数据用来标注本次数据的有效期限。

其中 Expires 是一个绝对时间，例如：Wed, 22 Oct 2018 08:41:00 GMT。

而 Cache-Control 则是一个相对时间，例如：max-age=300。

第二次打开网页

当浏览器第二次打开这个网页的时候，会首先检查Expires 或者 Cache-Control的时间是否过期，如果没有过期，则执行强缓存机制，直接从本地读取数据。如果超过有效期，则执行协商缓存机制，向后台发送带有last-modified和ETag标记的请求，用于协商当前的数据是否真的过期。如果后端判断数据确实已经过期，则返回新的数据，加载最新返回的数据；如果尚未真的过期，则继续执行强缓存机制，从本地读取数据信息。