浏览器缓存
2021-06-02 10:16:35
# 什么是浏览器缓存？
浏览器缓存是浏览器将请求到的网络资源存储在本地的一种行为。
# 浏览器使用缓存的机制
1. 浏览器发起请求
2. 浏览器查找是否有缓存（先找内存缓存，然后硬盘缓存）
3. 如果找不到缓存，则向服务器发起请求，将响应内容放入缓存并载入资源。
4. 如果找到缓存，判断缓存是否过期（根据上次请求返回的Last-Modify，过期则发送If-Modify-Since询问服务器是还能继续使用之前的缓存）或需要更新（向服务器发送If-None-Match，根据返回的Etag判断）
5. 如果缓存有效，浏览器获得一个304响应并将新内容（新资源或相关的参数）存入缓存
6. 载入资源
# 缓存存储在哪里？
1. 内存缓存，客户端进程结束后就会清除
2. 硬盘缓存，客户端结束后也不会清除
# 前端如何操作缓存？
1. 操作应用缓存（ApplicationCache），通过 `window.applicationCache` 对象
2. 操作缓存存储（CacheStorage），通过 `CacheStorage` 接口
# 前端如何强制不使用缓存？
1. 在静态资源 url 后手动添加版本号或时间戳
2. 在 html 中添加 head 信息：
>```
><!-- 用于 http 1.1，禁止浏览器使用缓存 -->
><meta http-equiv="Cache-Control" content="no-store" />
><!-- 用于 http 1.0，禁止浏览器使用缓存 -->
><meta http-equiv="Pragma" content="no-cache" />
><!-- 设定缓存经过 0 秒就过期 -->
><meta http-equiv="Expires" content="0" />
>```