缓存

怎么禁用缓存

devtool(F12) 中, 点击 disable cache,主要是关注 CSR 客户端渲染这种方式会很明显

前端缓存（浏览器缓存和http缓存）详解_前端浏览器缓存-CSDN博客

http 缓存流程图：

1. 使用 expires 字段控制缓存， “本地时间戳”不准则无法使用
2. 强缓存功能使用 cache-control 控制

后端

res.writeHead(200,{
	"Cache-Control":'max-age'=10
});

除了 max-age 属性，还有以下属性：
s-maxage 决定代理服务器缓存的时长
no-cache 表示是强制进行协商缓存
no-store 表示禁止任何缓存策略
public 表示资源可以被浏览器缓存也可以被代理服务器缓存
private 表示资源只能被浏览器缓存

Warning

no-cache 和 no-store 是互斥的！

协商缓存

Info

就是和服务器商量是读缓存还是读新资源。

基于 last-modified 的协商缓存实现方式：

1. 首先需要在服务器读出文件修改时间
2. 将读出来的修改时间赋给响应头的 last-modified 字段
3. 最后设置 Cache-control:no-cache

之后前端的每次请求中都会附上 If-Modified-Since 字段。
那么之后每次请求都会带上这个字段 If-Modified-Since 字段，而服务端就要根据这个时间来进行对比来决定是缓存还是返回新的资源。

仍然存在问题！！！！

1. 文件内容未发生更改，仅仅只是修改了更新时间，比如更改文件名
2. 文件在极短的时间内完成更改，因为记录文件修改时间的最小单位是 1s，文件修改时间不会发生更改，内容修改了依旧不会返回新文件。

Http1.1 中新增了 Etag，
即使用文件的 hash 来决定。

前端能做什么呢？

有哈希值的文件设置强缓存即可。没有哈希值的文件 (index.html) 设置协商缓存。