深入理解浏览器缓存机制 ( http )
一、介绍
http缓存：浏览器根据当前http请求报文策略 将网路资源存储到本地内存(memory cache)/硬盘(disk cache)中
缓存流程：
二、访问缓存优先级
- 下次访问资源时，先从内存中查找，如果内存中有，直接加载
- 如果内存中没有，则从硬盘中查找，如果硬盘中有，直接加载
- 如果硬盘中也没有，就会进行网络请求，成功后将网络资源存储到内存/硬盘中
三、分类
- 强缓存
- 协商缓存
优先进行强缓存，强缓存失效后，进行协商缓存
强缓存
不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control
Expires: Sun, 26 Apr 2020 18:00:00 GMT 最大过期时间 2020/04/26 18:00:00
Expires：缓存过期时间，如果请求资源在到期时间内，直接从缓存里读取。因为是绝对时间，受限于本地时间，如果修改本地时间，可能会导致缓存失效
Cache-Control:max-age=300
Cache-Control：max-age=300 代表当前请求返回时间的5分钟之后，再次请求，直接从缓存里读取。默认值 private：
Cache-Control 指令有很多，并且可以组合使用：
| 指令 | 作用 |
|---|---|
| public | 所有内容都将被缓存（客户端和代理服务器都可缓存） |
| private | 所有内容只有客户端可以缓存 |
| no-cache | 不使用强缓存，使用协商缓存 |
| no-store | 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存 |
| max-age | 表示缓存将在多少秒后失效 |
| s-maxage | 同max-age作用一样，只在代理服务器中生效，s-maxage的优先级高于max-age |
| … | … |
接下来我们测试一下强缓存：
注意：
这里把勾去掉，否则不会使用缓存
serve.js
let express = require('express')
let app = express()
let fs = require('fs')
let router = express.Router() // 这里使用Router
// 设置全局响应头
router.all('*', (req, res, next) => {
res.set({
'Cache-Control':'max-age=300' // 5分钟缓存时间
})
next()
})
// 静态资源
router.use(express.static('dist')) // 里面有index.html / 图片等静态资源
router.get('/userList', (req, res) => {
res.send({'name':'小明'})
})
app.use('/user',router) // 挂载
let server = app.listen(3000, '127.0.0.1', () => {
let host = server.address().address
let port = server.address().port
console.log('Server running at http://' + host + ':' + port)
})
接下来我们访问 127.0.0.1:3000/user/index.html
可以看到 强缓存已生效
接下来，我们F5刷新页面，此时进程还在，并且在缓存时间内，根据浏览器缓存原理，应该从 memory cache 中读取图片
注意：这里切勿 ctrl + F5 强制不走缓存
我们可以看到 form memory cache 从内存中读取图片 ！！！
接下来，我们把进程关掉，在缓存时间内，根据浏览器缓存原理，应该从 disk cache 硬盘中读取图片
看到 form disk cache 从硬盘中读取图片，完全符合访问缓存优先级
接下来，我们尝试 5 分钟之后，也就是请求缓存时间到期后，再次请求
我们可以看到，缓存时间到期后，直接从服务端发起请求
总结流程，在缓存时间内：
协商缓存
如果不设置 Cache-Control 默认public,max-age=0，当然我们可以设置为 Cache-Control : no-cache
serve.js
let express = require('express')
let app = express()
let fs = require('fs')
let router = express.Router() // 这里使用Router
// 设置全局响应头
router.all('*', (req, res, next) => {
res.set({
'Cache-Control':'no-cache' // 进行协商缓存
})
next()
})
// 静态资源
router.use(express.static('dist')) // 里面有index.html / 图片等静态资源
router.get('/userList', (req, res) => {
res.send({'name':'小明'})
})
app.use('/user',router) // 挂载
let server = app.listen(3000, '127.0.0.1', () => {
let host = server.address().address
let port = server.address().port
console.log('Server running at http://' + host + ':' + port)
})
接下来我们访问 127.0.0.1:3000/user/index.html
可以看到，Cache-Control : no-cache 已经生效
我们发现返回值多了ETag 和 Last-Modified
Etag
代表我们当前请求的数据在服务端的唯一标识，首次请求时，服务端会返回Etag标识，浏览器下次请求时，会带上赋值后的 If-None-Match 参数，并且与返回的ETag进行对比，如果一致则命中协商缓存。返回 304 Not Modified
Last-Modified
代表请求的数据在服务端最后一次修改的时间，同理，首次请求时，服务端会返回Last-Modified标识，浏览器下次请求时，会带上赋值后的 If-Modified-Since 参数，并且与返回的Last-Modified进行对比，如果一致则命中协商缓存。返回 304 Not Modified
！！！注意：Etag 的优先级要高于 Last-Modified，所以请求时，如果ETag存在，则对比 If-None-Match，反之对比 If-Modified-Since
接下来我们测试协商缓存：
可以看到，Etag 与 If-None-Match 对比一致，命中协商缓存，返回 304 Not Modified
然后，我们修改服务端静态资源，再次请求
我们会看到浏览器保留的 If-None-Match 与 响应头 Etag 对比不一致，缓存策略失效！！！发送请求
总结协商缓存：
至此，我们就彻底搞懂http缓存机制