node实战前端缓存总结
总结
1、浏览器第一次发起一个http/https请求，读取服务器的资源
2、服务端设置响应头（cache-control、Expires、last-modified、Etag）给浏览器
2.1. cache-control、Expires 属于强缓存，last-modified、Etag属于对比缓存（协商缓存）
3、浏览器不关闭tab、f5刷新页面（再次发起一个请求给服务器）
3.1、如果cache-control的max-age 和 Expires 未超过缓存时间，所有资源除了index.html 都来自于内存缓存（from memory cache）加载。且状态码为200
3.2、如果cache-control的max-age缓存时间为5s， Expires的过期时间是超过5s，则cache-control会覆盖Expires
3.3、如果强缓存失效，则下一步会走对比缓存。浏览器会从第二步的拿到的响应头，在刷新发起请求会设置
a、if-modified-since值为响应的last-modified的值；
b、if-none-match 值为响应的Etag的值;
3.4、如果if-modified-since 和if-none-match都存在，则if-none-match的优先比if-modified-since高。直接对比第二步给浏览器的Etag的值，如果相等就直接返回一个状态为304不返回内容，如果不相等就返回一个状态码为200，并且会返回内容和cache-control 、Expires、last-modified、Etag等响应头；
3.5、如果if-modified-since 存在， if-none-match不存在，步骤跟上述的3.4类似，只不过服务端对比的是if-modified-since 和第一次返回给浏览器last-modified的值
4、如果浏览器关闭tab。重新打开新tab，发起请求资源。步骤跟上述3类似，只不过在上述3.1中，左右资源除了index.html缓存（from disk cache）都从磁盘加载。
http缓存分为强缓存 和 对比缓存（协商缓存）
1、强缓存：
当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回，不存在则请求真的服务器。
强制缓存直接减少请求数，是提升最大的缓存策略。 它的优化覆盖了文章开头提到过的请求数据的全部三个步骤。如果考虑使用缓存来优化网页性能的话，强制缓存应该是首先被考虑的。
可以造成强制缓存的字段是 Cache-control 和 Expires
Expires
这是 HTTP 1.0 的字段，表示缓存到期时间，是一个绝对的时间 (当前时间+缓存时间)。在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。
Expires: Thu, 22 Mar 2029 16:06:42 GMT
const http = require('http')
const url = require('url')
const path = require('path')
const fs = require('fs')
http.createServer((req, res) => {
let { 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)
以上代码给Expires设置过期时间为20s。
-
首次请求 首次请求 全部走网络请求
-
20s内F5刷新当前，从内存里面加载。因为我们没有关闭TAB，所以浏览器把缓存的应用加到了内存缓存。（耗时0ms，也就是1ms以内）
-
20s内关闭tab，打开请求的url，从磁盘加载
关闭了TAB，内存缓存也随之清空。但是磁盘缓存是持久的，于是所有资源来自磁盘缓存。（大约耗时3ms，因为文件有点小）而且对比2和3，很明显看到内存缓存还是比disk cache快得多的。 -
20s以后请求，缓存已经失效，重复第1步
过期的缺点：
在这里，其他电脑访问服务器，若修改电脑的本地时间，会导致浏览器判断缓存失效
这里修重新修改缓存时间：
res.setHeader（'Expires'，new Date（Date.now（）+ 2000000）.toGMTString（））
Cache-control
已知Expires的缺点之后，在HTTP/1.1中，增加了一个字段Cache-control，该字段表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求
Expires 和 Cache-control 区别
Expires设置的是 绝对时间
Cache-control设置的是 相对时间
缓存控制的优先级大于到期
Cache-control: max-age=20
- Cache-control：max-age = 20 max-age最大有效时间
const http = require('http')
const url = require('url')
const path = require('path')
const fs = require('fs')
http.createServer((req, res) => {
let { pathname } = url.parse(req.url, true);
console.log(pathname)
let abs = path.join(__dirname, pathname);
res.setHeader('Cache-Control', 'max-age=20')
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)
以上代码给cache-control设置max-age为20s
解析：首次请求->关闭tab再次请求参考Expires的图
- no-cache 告诉浏览器忽略资源的缓存副本，强制每次请求直接发送给服务器，拉取资源，但不是“不缓存”
- no-store 强制缓存在任何情况下都不要保留任何副本
- public 任何路径的缓存者（本地缓存、代理服务器），可以无条件的缓存改资源
- private 只针对单个用户或者实体（不同用户、窗口）缓存资源
no-store 和 no-cache的区别
-
no-store:
如果服务器再响应中设置了no-store。那么浏览器不会存储这次相应的数据，当下次请求时，浏览器会在请求一次，就是说不会对比Etag
res.setHeader('Cache-control', 'no-store') -
no-cache
如果服务器在响应中设置了no-cache，那么说明浏览器在使用缓存前会对比Etag，返回304就会避免修改
public 和 private
- 设置了public,表示该响应可以在用户的浏览器或者任何中继web代理对其进行缓存,不写默认为public,表示只有用户的浏览器可以缓存private响应不允许任何web代理进行缓存，
只有用户的浏览器可以进行缓存。
2、对比缓存（协商缓存）
当强制缓存失效(超过规定时间)时，就需要使用对比缓存，由服务器决定缓存内容是否失效。对比缓存是可以和强制缓存一起使用。
last-modified
1、服务器在响应头中设置last-modified字段返回给客户端，告诉客户端资源最后一次修改的时间。
Last-Modified: Sat, 30 Mar 2019 05:46:11 GMT
2、浏览器在这个值和内容记录在浏览器的缓存数据库中。
3、下次请求相同资源，浏览器将在请求头中设置if-modified-since的值（这个值就是第一步响应头中的Last-Modified的值）传给服务器
4、服务器收到请求头的if-modified-since的值与last-modified的值比较，如果相等，表示未进行修改，则返回状态码为304；如果不相等，则修改了，返回状态码为200，并返回数据
http.createServer((req, res) => {
let { pathname } = url.parse(req.url, true);
console.log(pathname);
let abs = path.join(__dirname, pathname);
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if(err) {
res.statusCode = 404;
res.end('Not Fount');
return
}
if(stat.isFile()) {
res.setHeader('Last-Modified', stat.ctime.toGMTString())
console.log(stat.ctime.toGMTString())
if(req.headers['if-modified-since'] === stat.ctime.toGMTString()) {
console.log('if-modifined-since', req.headers['if-modified-since'])
res.statusCode = 304;
res.end()
return
}
fs.createReadStream(abs).pipe(res)
}
})
}).listen(3000)
last-modified的缺点：
- last-modified是以秒为单位的，假如资料在1s内可能修改几次，那么该缓存就不能被使用的。
- 如果文件是通过服务器动态生成，那么更新的时间永远就是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。
Etag
为了解决上述问题，出现了一组新的字段 Etag 和 If-None-Match
Etag是根绝文件内容，算出一个唯一的值。服务器存储着文件的 Etag 字段。之后的流程和 Last-Modified 一致，只是 Last-Modified 字段和它所表示的更新时间改变成了 Etag 字段和它所表示的文件 hash，把 If-Modified-Since 变成了 If-None-Match。服务器同样进行比较，命中返回 304, 不命中返回新资源和 200。
Etag 的优先级高于 Last-Modified
http.createServer(function(req, res) {
let { pathname } = url.parse(req.url, true);
console.log(pathname)
let abs = path.join(__dirname, pathname);
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if(err) {
res.statusCode = 404;
res.end('Not Found')
return
}
if(stat.isFile()) {
//Etag 实体内容，他是根绝文件内容，算出一个唯一的值。
let md5 = crypto.createHash('md5')
let rs = fs.createReadStream(abs)
let arr = []; // 你要先写入响应头再写入响应体
rs.on('data', function(chunk) {
md5.update(chunk);
arr.push(chunk)
})
rs.on('end', function() {
let etag = md5.digest('base64');
if(req.headers['if-none-match'] === etag) {
console.log(req.headers['if-none-match'])
res.statusCode = 304;
res.end()
return
}
res.setHeader('Etag', etag)
// If-None-Match 和 Etag 是一对， If-None-Match是浏览器的， Etag是服务端的
res.end(Buffer.concat(arr))
})
}
})
}).listen(3000)
Etag的缺点：
- 每次请求的时候，服务器都会把index.html 读取一次，以确认文件有没有修改
- 对大文件进行etag 一般用文件的大小 + 文件的最后修改时间 来组合生成这个etag
