浅谈http缓存使用(Cache-Control、Last-Modified、ETag使用)
创建一个简单的express服务器。
服务器端返回头设置Cache-Control。
max-age后是本地缓存的秒数。
import express from express import fs, { statSync } from fs const app new express() app.use(express.json()) //给app设置中间件 这样所有请求都会使用该缓存。 app.use((req, res, next) { res.set({ Cache-Control : max-age 2 , next() app.get( /getName , (req, res) { res.send({ name: 名字 app.listen(3000, () { console.log( 服务启动 )
浏览器审查时 重复请求 会发现被强缓存在本地的2秒内都会disk cache从本地缓存请求。
2秒缓存过期后便会重新像服务器发送请求。
协商缓存一般在强缓存之后 每当强缓存过期 再次请求时将会去服务器请求。
此时请求头会生成一个与响应头对应的属性 来验证文件是否修改。
如若修改则返回最新文件 未修改则返回304不反回包体 提示浏览器继续使用原来保存的缓存。
协商缓存有两种。
我们保留两秒的强缓存 加上Last-Modified 即文件的最后修改时间戳。
app.use((req, res, next) { const stat fs.statSync( ./app.js ) const { mtime } stat res.set({ Cache-Control : max-age 2 , Last-Modified : mtime.toUTCString(), next()
当浏览器每次去服务器请求 会将响应头的Last-Modified记录 也就是浏览器进行下一次请求时 能够知道上次的Last-Modified 记得上次服务端文件的修改时间。
这意味着什么呢
连续请求时 首先会进行强缓存 2s缓存过期后 去服务器时 请求头会自动带上If-Modified-Since 这个字段也就是上次请求响应头中的Last-Modified。
此时响应头仍然有一个Last-Modified最后修改时间 而请求头的If-Modified-Since是上次请求返回的最后修改时间 会对这两个值进行对比。
若是在该请求之前 服务器文件被修改过了 Last-Modified则更新了 会比If-Modified-Since时间更新 则表示请求文件被修改了 否则未修改。
未修改则返回304 表示浏览器可继续用原来的缓存内容。
这里用火狐浏览器测试 因为谷歌浏览器确实是协商缓存 但是它并不能显示304。
2秒强缓存结束 就会进行协商缓存 发现文件未改变 返回304继续读取缓存。
我们修改一下服务器文件并重启 再请求一次。
此时文件被修改 返回了323个字节 没有从缓存读取。
让我们看一看304的协商字段和最新的协商字段
ETag代替了Last-Modified作为文件最后的标识 是一个随机生成的字符串。
If-None-Match会记录上次请求获取的ETag。
因为ETag缓存默认存在 不知道是不是express服务器默认携带 因此我们可以将Last-Modified注释 用火狐继续测试。
ETag优先级比Last-Modified高。
app.use((req, res, next) { // const stat fs.statSync( ./app.js ) // const { mtime } stat res.set({ Cache-Control : max-age 2 , // Last-Modified : mtime.toUTCString(), next()
注释掉了仍然会存在304 也就是协商缓存 就是ETag在起作用。
我们也修改一次文件 最好就修改返回内容 因为ETag与Last-Modified不同 返回内容不变的话 ETag知道文件修改了等于没修改不会改变。
查看两次不同。
HTTP 请求头Cache-Control 详解 大家好,我是阿萨。昨天我们学习了缓存机制。[你了解缓存吗?]了解了缓存基本原理。今天我们就详细学习下抓包的请求中Cache-Control 字段的所有设置的含义。
当我们在谈论HTTP缓存时我们在谈论什么 在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰,每个人都知道进入一次网页之后再刷新一次页面,加载速度会比首次加载快非常多,每个人都知道这是浏览器缓存的magic,但是对此背后的原因可能不甚了解... 当我们在谈论HTTP缓存时我们在谈论什么: 我们实际上是在谈论下面这两种情况: 缓存流程: 浏览器第一次请求资源时: 浏览器第一次请求资源时,必须下载所有的资源,然后根据响应的header内容来决定,如何缓存资源。可能采用的是强缓存,也可能是弱缓存 浏览器后续请求资源时的匹配流程:
相关文章
- Redis【8】-缓存穿透、缓存击穿、缓存雪崩
- TP5开启缓存
- 关于ehcache缓存中eternal及timeToLiveSeconds和timeToIdleSeconds的说明
- redis的缓存更新策略,缓存粒度控制
- 厉害了,自己动手实现 LRU 缓存机制!
- 彻底弄懂 HTTP 缓存机制及原理!
- 经典问题:先更新数据库,还是先更新缓存?
- Nginx 反向代理可以缓存 HTTP POST 请求页面吗?
- 如何用Redis缓存改善数据库查询性能?
- 闪存缓存可提高应用程序性能,但需要进行平衡
- Android系统应用信息中存储和缓存的计算方法
- ms sql server缓存清除与内存释放
- 浏览器HTTP的缓存机制
- HTTP协议缓存策略深入详解之ETAG妙用
- Redis缓存的主要异常及解决方案
- 浅谈HTTP缓存与CDN缓存的那点事
- 使用 AsyncTask 下载图片,并用LurCache 实现图片缓存(超详细)
- saiku缓存整理
- jQuery.getJSON的缓存问题的解决办法
- http缓存总结
- React Native Image Cache(图片缓存库模块)详解(一)
- 多级缓存-Windows安装OpenResty