一、缓存位置 #

根据缓存查找优先级，分成

1.1、Service worker #

特点：

• 运行在浏览器背后的独立线程，无法操作DOM，不影响页面性能
• 核心功能是拦截和处理网络请求，所以为了安全，上线后必须使用 HTTPS
• 在 install 事件中，对所有需要的资产进行缓存，如果所有文件都缓存成功，表示 Service Worker 安装成功
• 在刷新页面时，Service Worker 将开始接收 fetch 事件，会判断请求是否命中缓存，若没命中，则调用 fetch 发出网络请求

1.2、Memory cache #

特点：

• 存储在内存上的缓存，响应速度快，存储空间小
• 当 Tab 关闭时，内存上的缓存也失效
• 常见的 base64图片, 小的 css,js 文件会存放进内存

1.3、Disk cache #

特点：

• 存储在硬盘上，空间大，存储时效性长

1.4、Push Cache #

特点：

• http 2.0 产物
• 只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂

二、HTTP 缓存 #

根据是否需要向服务端发送HTTP请求将缓存分成 强缓存 和 协商缓存

浏览器请求有两大特点

1、每次发送请求前都会先去浏览器缓存中查找该请求的结果和缓存标识

2、每个拿到返回的请求结果都会将该结果和缓存标示存储到浏览器缓存中

2.1、强缓存 #

Expires: 表示资源的过期时间

特点：

• http 1.0 产物
• 值是一个具体时间值，依赖于本地时间，若本地时间修改了，缓存就失效了

Cache-Control：表示资源的有效时间

特点：

• http 1.1 产物, 优先级高于 Expires

• 值常见的 max-age, 例如 max-age: 300s, 表示资源在请求返回后的 300s 内，如果浏览器再次请求该资源，就使用缓存

• 值除了设置 max-age, 还有其它很多设置，可随意组合

总结

• 强缓存只能判断资源在某个时间内是否过期了，它不会判断资源是否发生改变了

• 判断资源是否改变需要使用到协商缓存

2.2、协商缓存 #

浏览器和服务端通话类似于问答形式，浏览器需要在请求中携带缓存标示，服务端根据标示来判断资源文件是否发生了改变

• 若没改变，则直接返回 304 和 空的响应体，浏览器会直接从缓存中读取资源
• 若发生改变，则返回 200 和最新的资源内容，浏览器会将新的请求结果和缓存标示存储到浏览器缓存中

Last Modified: 资源文件在服务端的最后修改时间

特点：

• http 1.0 产物
• 搭配请求头 If-Modified-Since 字段使用，在第一次请求资源时，服务端会在响应头中返回 Last Modified 字段，再次请求时，浏览器会将上次返回的 Last Modified 字段的值通过 If-Modified-Since 字段发送给服务端
• 最后修改时间是秒，若 1S 只能修改多次，则感应不到

ETag：通过资源内容生成的唯一标示 Tag

特点：

• http 1.1 产物，优先级高于 Last Modified
• 搭配请求头 If-None-Match 字段使用，在第一次请求资源时，服务端会在响应头中返回 ETag，再次请求时，浏览器会将上次返回的 ETag 的值通过If-None-Match 字段发送给服务端
• 缺点：耗性能，每次修改文件内容，都会生成新的 ETag

三、缓存策略 #

四、用户操作 #

• 刚进入页面，查控 Disk Cache 是否有缓存
• F5 刷成，因为 TAB 并没有关闭，因此 memory cache 是可用的，先从 Memory Cache 中判断是否有缓存
• Ctrl + F5, 不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache(为了兼容，还带了 Pragma: no-cache),服务器直接返回 200 和最新内容