小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
简介
浏览器缓存机制是我们常见的面试问题,也是开发过程中的必备知识,这篇文章一起来梳理一下~
先上一张自己画的大图
缓存的几个位置
- from disk cache: 从硬盘中读取缓存
- from memory cache: 从内存冲读取缓存
两种都只能读取一些派生类文件,比如 html 中引入的一些外部资源
浏览器缓存的判断方法
对应上面的大图,可以看到浏览器缓存的判断方法。
Cache-Control
首先判断 Cache-Control
// 接下来 2592000 秒可以重用这个响应
Cache-Control: max-age=2592000
// 每次都先和服务器确认资源是否变化,没变化则不下载
Cache-Control: no-catch
// 每次都请求服务器并下载
Cache-Control: no-store
Etag
如果 Cache-Control 是 max-age,且超出了设置的时间,会判断 Etag,Etag 是当前文件的唯一标识,有服务器制定生成规则(文件索引+大小+修改时间hash)
向服务器发送请求,请求头带
If-None-Match: Etag
服务器返回 200,表示文件过期,返回 304 表示文件没有过期
Last-Modified
如果没有 Etag,会判断是否有 Last-Modified,请求头带
If-Modify-Since: 时间精确到秒
服务器返回 200,表示文件过期,返回 304 表示文件没有过期
以上是浏览器缓存机制的小知识点,可以看上面的大图对照学习,欢迎点赞和评论~