浏览器缓存机制以及简单实践

[mario-mui]

通常浏览器缓存策略分为两种：强缓存和协商缓存

1、基本原理

• 浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。
• 如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified和etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源
• 如果前面两者都没有命中，直接从服务器加载资源

2、强缓存。cache-control 为🌰

对需要设置强缓存的资源的请求头(req.headers)设置 'cache-control: max-age=60*60'

3、协商缓存

1. 基本概念

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串

协商缓存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的

2. 已Etag 作为实现

3. 效果如下图

1. image.png 已经使用了缓存(from memory cache)不会在发请求
2. test.js 的状态码为304 ，不会重新获取资源

PS

整体DEMO 位于

[mario-mui]