强制缓存整体流程就是在第一次访问服务器取到数据之后，在过期时间之内不会再去重复请求。
node中实现强制缓存
Expires http中1.0中就是通过 Expires响应头来实现
const http = require('http')
const url = require('url')
const path = require('path')
const fs = require('fs')
http.createServer((req, res) => {
const {pathname} = url.parse(req.url, true)
console.log(pathname);
let abs = path.join(__dirname, pathname)
res.setHeader('Expires', new Date(Date.now() + 20000).toGMTString())
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if (err) {
res.statusCode = 404
res.end('not found')
return
}
if (stat.isFile()) {
fs.createReadStream(abs).pipe(res)
}
})
}).listen(3000)
- 前端页面实现 // 直接引入一个图片即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./a.jpg" alt="" srcset="">
</body>
</html>
以上代码给Expires设置过期时间20S[看下图]
Expires 过期时间=.png
-
首次请求 全部走网络请求 a.jpg中下的size为658kb 直接从网络获取
image.png
-
-
20s内F5刷新当前，从内存里面加载。因为我们没有关闭TAB，所以浏览器把缓存的应用加到了内存缓存 size这一栏就变成了memoey cache
image.png
-
-
3 关闭tab 窗口的时候，重新打开 size这一栏变成disk cache
disk cache=.png
过期的缺点：
在这里，其他电脑访问服务器，若修改电脑的本地时间，会导致浏览器判断缓存失效 这里修重新修改缓存时间： res.setHeader（'Expires'，new Date（Date.now（）+ 2000000）.toGMTString（））
cache control
http中1.1中主要通过Cache-Control来实现
该字段表示资源缓存的最大有效时间，该时间段内，浏览器不需要像服务器发起请求
Cache-Control的区别
Expires设置的是绝对时间
Cache-Control设置的事相对时间
Expires 和 Cache-control 区别
Expires设置的是 绝对时间
Cache-control设置的是 相对时间
缓存控制的优先级大于到期
private 客户端可以缓存
public 客户端和代理服务器均可缓存
max-age 缓存资源将在xxx秒后过期
no-cache 需要使用协商缓存来验证是否过去
no-store 不可缓存
协商缓存
协商缓存在每次读取数据时都要和服务器通信，并且增加缓存标志。
网友评论