1 HTTP 缓存
1.1 缓存
1.1.1 什么是缓存
缓存（Cache）是计算机科学中的一种机制，指通过将数据的副本存储在靠近请求方的位置，以便在未来的请求中快速访问这些数据，而无需重新从原始数据源获取。
在 HTTP 缓存中，浏览器或代理服务器会将网络资源（如 HTML 文件、CSS 样式表、JavaScript 脚本、图片等）存储在本地，以减少后续请求的延迟和服务器的压力。
1.1.2 缓存的工作原理
HTTP 缓存的工作原理可以分为两个主要阶段：
缓存的存储阶段
当用户通过浏览器访问一个网页时，浏览器会向服务器发出 HTTP 请求获取网页资源。在服务器响应这些请求时：
- 如果 HTTP 响应头中包含与缓存相关的信息（如
Cache-Control,ETag,Last-Modified等字段），浏览器会根据这些信息决定是否将该资源存储到缓存中。 - 资源被存储在浏览器的内存缓存（Memory Cache）或磁盘缓存（Disk Cache）中，以便后续请求时直接复用。
缓存的利用阶段
当用户再次访问同一网页或加载已缓存的资源时：
- 浏览器首先检查缓存中是否有满足条件的资源（即 缓存命中）。
- 如果满足缓存条件，浏览器会直接从缓存中加载资源，而不会请求服务器（即 强缓存）。
- 如果缓存不满足条件（例如缓存已过期），浏览器会向服务器发送一个条件性请求，通过协商缓存机制检查资源是否需要更新。
1.1.3 为什么需要缓存
- 减少服务器压力
- 提升加载速度
1.2 HTTP 缓存机制
1.2.1 HTTP 头中的缓存相关字段
Cache-Control（如no-cache,no-store,max-age等）ETag和Last-Modified头Expires- 浏览器缓存的优先级处理（
Cache-ControlvsExpires）
1.2.2 强缓存与协商缓存
强缓存（Fresh Cache）
在强缓存机制下，浏览器通过本地缓存直接响应请求，完全跳过与服务器的通信。这通常依赖以下 HTTP 头：
Cache-Control：用于定义资源的缓存行为，如max-age=3600表示资源可以在缓存中保存 3600 秒。Expires：表示资源过期的绝对时间点（已被Cache-Control部分取代）。
强缓存命中时，资源的状态码为 200，但并未从网络中获取，而是直接从缓存中读取。
特点
- 无服务器交互：在缓存未过期的情况下，浏览器直接使用本地缓存资源，无需向服务器发送请求。
- 高效：因为跳过了与服务器的通信，减少了网络延迟，显著提高了页面加载速度。
协商缓存（Revalidation Cache）
当强缓存失效后，浏览器会向服务器发送一个条件性请求，询问缓存的资源是否仍然有效。服务器根据条件决定是否重新发送资源或返回状态码 304（Not Modified），表示资源未更改，可以继续使用缓存版本。协商缓存涉及以下 HTTP 头：
ETag：资源的唯一标识符。浏览器会在请求头中发送If-None-Match，服务器通过对比ETag判断资源是否被修改。Last-Modified：资源的最后修改时间。浏览器通过If-Modified-Since询问服务器，若资源未更新，则返回 304 状态码。
特点
- 需要服务器验证：当强缓存失效后，浏览器会向服务器发送条件性请求，询问缓存资源是否仍然有效。
- 灵活：通过验证机制，确保缓存内容的准确性，即使资源频繁更新也能避免内容过时。
2 Edge 浏览器中的缓存
2.1 Edge 浏览器中缓存的特点
- 依托 Chromium 内核，支持现代 Web 标准。
- 高效的缓存策略，用于加速页面加载。
2.2 Edge 缓存存储的层次
- 内存缓存（Memory Cache）：短期存储最近使用的资源。
- 磁盘缓存（Disk Cache）：较长期存储访问过的资源。
- Service Worker 缓存：为 PWA 提供支持。
2.3 缓存的用户控制
- 使用开发者工具（DevTools）查看缓存
- 手动清除缓存
