浏览器缓存

对于HTML、js和css文件的缓存策略

强缓存

优先级比协商缓存高，不经过服务端获取文件，具体看Cache-Control、Expires

Cache-Control

http/1.1开始有的字段，主要取值为：

• public: 客户端和服务器都可以缓存
• privite：只有客户端可以缓存
• no-cache：跳过强缓存
• no-store：跳过所有缓存
• max-age：缓存保质期，相对时间

Expires

• 从http/1.0就有，值是时间戳，是一个具体时间。
• 该时间和客户端时间对比，但客户端时间是可以更改的

所以推出了Cache-Control字段，如果两个字段同时存在，则取Cache-Control

memory Cache和disk Cache

强缓存中，我们在network里，可以看到size里会有这两个值

• memory Cache表示缓存来自浏览器的tab内存 – 快
• disk Cache表示来自于硬盘 – 相对慢

关闭tab，会发现原来的memory都会变成disk。

一般情况下，浏览器会将js和图片等文件解析执行后直接存入内存中，这样当刷新页面时，只需直接从内存中读取(from memory cache)；
而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)

协商缓存

需要和服务端协商，一般用来缓存HTML文件
触发条件：

• Cache-Control：no-cache
• Cache-Control：max-age=0

Last-Modified

该文件在服务器最后的修改时间

验证流程

1. 第一次访问页面时，响应头会返回last-modified字段
2. 刷新页面后，请求头里带上If-Modified-Since字段，该字段的值为上一次的last-modified的值
3. 服务端根据这两个值判断返回 缓存里的文件304 / 新文件200

Etag

当前资源的一个唯一标识，若文件发生变化，该值也变化

验证流程

和last-modified差不多，请求头的值变为If-None-Match

Etag存在的原因

1. 如果该文件会有周期性的更改，但内容不变（仅仅改变了时间），那还是应该返回缓存里的文件。
2. 如果文件在1秒内多次修改，那Etag可以保证返回新文件

Note: Etag的优先级高于last-modified

留言

有任何没写清楚的，欢迎大家在评论区里讨论、或v+ laoyin666it