一、前端缓存分类【http缓存|浏览器缓存】
1、http缓存分类:强缓存 协商缓存
都是服务端设置 HTTP Header 来实现的
(1)强缓存
- 不需要发送请求到服务端,直接读取浏览器本地缓存
- //
- 在 Chrome 的 Network 中显示的 HTTP 状态码是 200
- 在 Chrome 中,强缓存又分为 Disk Cache(存放在硬盘中)和 Memory Cache(存放在内存中),存放的位置是由浏览器控制的。
- //
- 是否强缓存:由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制
- Expires(优先级最低)
- 服务端在响应头中设置一个 GMT 格式的到期时间,值为HTTP日期
- 若系统时间小于响应头的Expires时间,会从本地读取,不会去请求服务器;超过了,就去请求服务区获取最新资源
- 由于和系统时间进行比较,所以当系统时间和服务器时间不一致的时候,会有缓存有效期不准的问题==》出现了Cache-Contorl
- Cache-Control (在请求头和响应头中都可以使用)
-
max-age:单位是秒,缓存时间计算的方式是距离发起的时间的秒数,超过间隔的秒数缓存失效
-
no-cache:不使用强缓存,需要与服务器验证缓存是否新鲜
-
no-store:禁止使用缓存(包括协商缓存),每次都向服务器请求最新的资源
-
private:专用于个人的缓存,中间代理、CDN 等不能缓存此响应
-
public:响应可以被中间代理、CDN 等缓存
-
must-revalidate:在缓存过期前可以使用,过期后必须向服务器验证
-
- Pragma (优先级最高)
- 只有一个属性值:no-cache (效果同Cache-Contorl中的no-cache)
- 不使用强缓存,需要与服务器验证缓存是否新鲜
- Expires(优先级最低)
(2)协商缓存
- 协商缓存表示在使用本地的缓存之前,会先向服务器发一个请求,与服务器协商当前浏览器的缓存是否已经过期了,如果没过期,那么就使用本地的资源,如果过期了就去请求最新资源。
- 主要解决强缓存资源不能及时更新的问题
- 实现:(会将这两个属性值到服务端去验证是否命中协商缓存,如果命中了协商缓存,会返回 304 状态)
- last-modified 配合 If-Modified-Since
-
// 判断客户端请求的是03这个图片 if(pathname === '/img/03.jpg') { // 读取 03 图片的最后修改时间 const { mtime } = fs.statSync("./img/03.jpg") // 判断客户端发送过来的if-modified-since是否与mtime一致,如果一致就直接返回304 if(req.headers['if-modified-since'] === mtime.toUTCString()) { res.statusCode = 304 res.end() } else // 如果不一致,那么就请求最新的资源返回给客户端 const data = fs.readFileSync("./img/03.jpg") // 这2句代码是设置协商缓存 res.setHeader("last-modified", mtime.toUTCString()) res.setHeader("Cache-Control", "no-cache") res.end(data) } }
-
- Etag 配合 If-None-Match
- last-modified 配合 If-Modified-Since
// 引入 etag 模块 const etag = reqiure("etag") if(pathname === '/img/03.jpg') { const data = fs.readFileSync("./img/03.jpg") // 获取生成的etag字符串 const etag = etag(data) // 判断客户端发送的 If-None-Match 与服务端是否一致 if(req.headers['if-none-match'] === etag) { res.statusCode = 304 res.end() } else { // 如果不一致,那么就请求最新的资源返回给客户端 const data = fs.readFileSync("./img/03.jpg") // 这2句代码是设置协商缓存 res.setHeader("etag", etag) res.setHeader("Cache-Control", "no-cache") res.end(data) } }
2、浏览器缓存分类:本地存储 默认缓存
二、缓存作用:
- 为加快资源获取速度,提升用户体验,减少网络传输,缓解服务端的压力
三、缓存流程图:
四、http缓存的强缓存
标签:03,缓存,浏览器,res,Cache,etag,http From: https://www.cnblogs.com/le-cheng/p/17498486.html