上一篇👉: 浏览器存储

浏览器缓存

1. 浏览器缓存机制的理解

浏览器缓存机制是网页性能优化的核心组件之一，通过存储重复使用的资源来加速页面加载速度，减少网络请求次数

初次加载资源

• 首次请求:当浏览器首次请求某个资源时（如HTML、CSS、JavaScript文件或图片），服务器会返回该资源，并在响应头中附带缓存相关的指令，如Cache-Control（推荐用于HTTP/1.1）和Expires（适用于HTTP/1.0）。Cache-Control可能包含max-age=来指示资源在客户端可缓存的最大时间长度，而Expires则直接指定资源何时过期的日期时间。

强制缓存阶段

• 资源存储: 浏览器接收到资源后，会将其存储在本地缓存中，并记住相应的缓存策略（Cache-Control或Expires）。
• 后续请求处理: 下次请求相同的资源时，浏览器首先检查资源是否还在其缓存的有效期内。如果在有效期内（即没有“过期”），浏览器直接从本地缓存中加载资源，无需再次向服务器发起请求，这便是强制缓存生效的体现。

协商缓存阶段

• 资源过期: 如果发现资源已过期，浏览器不会立即丢弃缓存，而是进入协商缓存阶段，尝试确认资源是否真的需要更新。

• 发送验证请求: 浏览器发送一个包含If-None-Match（基于ETag验证）或If-Modified-Since（基于Last-Modified时间验证）的请求头的HTTP请求到服务器。

• If-None-Match: 包含之前响应中的ETag值，用于精确匹配服务器上的资源版本。

• If-Modified-Since: 包含上次请求时服务器返回的资源最后修改时间。

服务器响应

• 资源未修改: 如果服务器判断资源未发生改变（通过ETag或Last-Modified验证），则返回一个HTTP状态码304（Not Modified），指示浏览器可以继续使用本地缓存的副本。

• 资源已修改: 若资源有所更新，服务器则返回一个新的资源实体，并附带新的ETag或Last-Modified，以及新的Cache-Control或Expires策略，状态码为200（OK）。

版本控制策略

• 资源版本标记: 为避免用户因浏览器缓存而未能获取到最新的资源，开发人员常在资源URL后附加版本号（如filename.js?v=2.1），即便资源内容未变，也能迫使浏览器请求服务器获取新资源，确保用户始终访问到的是最新版本。

通过上述流程，浏览器缓存机制有效地平衡了性能优化与资源更新的需求，确保了网页加载的高效性和内容的新鲜度

2 浏览器资源缓存的位置

浏览器资源缓存分布在四个主要位置，按照访问和使用优先级排列如下：

Service Worker缓存

• 特性：Service Worker运行在浏览器主线程之外，赋予开发者对缓存前所未有的控制力。它允许自定义缓存策略，包括选择缓存哪些文件、如何匹配及读取缓存。Service Worker缓存具有持续性，除非主动清理否则一直有效。当Service Worker未找到缓存内容时，会通过fetch请求数据，但不论数据实际来源（Memory Cache、Disk Cache或网络），浏览器呈现时均表现为通过Service Worker获取。

Memory Cache（内存缓存）

• 特性：Memory Cache提供了最快的访问速度，因为它直接存储在内存中。然而，这种高速度伴随着短暂的生命周期，一旦浏览器标签页关闭，内存中的缓存随之释放。

Disk Cache（磁盘缓存）

• 特性：Disk Cache存储于硬盘上，相较于Memory Cache，读取速度稍慢，但胜在容量大、持久性强。根据HTTP响应头中的指令，Disk Cache确定资源的缓存策略，能长期存储资源，甚至跨浏览会话。它是浏览器缓存体系中最广泛使用的一种形式。

Push Cache（推送缓存）（HTTP/2特性）

特性：

• 仅当上述三种缓存均未命中时启用。
• 缓存时间有限，局限于当前会话，会话结束即失效。
• 支持服务器主动推送资源到客户端，所有类型的资源均可推送，但Edge和Safari浏览器兼容性不佳。
• 即便资源设置了no-cache或no-store，仍可被推送。
• 连接关闭时，Push Cache被清除。
• 共享HTTP/2连接的多个页面可复用相同缓存。
• 推送的缓存项仅能被使用一次。
• 浏览器可拒绝已存在的资源推送，避免冗余。
• 支持跨域推送资源。

3. 协商缓存和强缓存的区别

类型	目标	设置方式	行为	关键点
强缓存（本地缓存）	无需与服务器通信直接使用缓存资源	- Cache-Control: max-age=<seconds> - Expires: <date>	有效期內，直接使用本地缓存，无网络请求	加载速度快，减少网络请求
协商缓存	先询问服务器资源是否变更再决定是否使用缓存	- 响应头: ETag, Last-Modified - 请求头: If-None-Match, If-Modified-Since	浏览器询问服务器，根据服务器响应决定使用缓存或获取新资源	确保内容最新，减少数据传输
总结对比
差异 :	强缓存避免额外请求，协商缓存至少一次验证请求
协同作用 :	先尝试强缓存，失败则协商缓存
策略运用 :	根据资源特性灵活选择或组合使用策略		开发者可设计更优缓存策略，提升用户体验和性能

强缓存（本地缓存）

• 目标：使浏览器能够在不与服务器通信的情况下直接利用缓存资源。

• 设置方式：

  • Cache-Control：响应头字段，提供更多控制选项，如max-age=<seconds>定义资源的有效时间。
  • Expires：响应头字段，指定资源过期的具体日期时间，但可能受客户端时间不同步的影响。

• 行为：如果资源在有效期内，浏览器不会发送请求到服务器，直接使用本地缓存。

• 关键点：提高加载速度，减少网络请求。

协商缓存

• 目标：在不确定资源是否已更新时，先询问服务器资源是否变更，再决定是否使用缓存。

• 设置方式：利用响应头的 ETag 或 Last-Modified，以及请求头的 If-None-Match 或 If-Modified-Since。

  • ETag 是资源的唯一标识符，比基于时间的 Last-Modified 更精确。
  • Last-Modified 标记资源最后修改时间，但精度有限。

• 行为：浏览器发送请求到服务器检查资源是否更新，服务器通过这些标识符判断是否返回“304 Not Modified”让浏览器继续使用缓存，或者返回新资源。

• 关键点：确保内容最新，同时减少不必要的数据传输。

总结对比

• 差异：强缓存完全避免了额外的网络请求，而协商缓准则至少会发起一个验证请求
• 协同作用：两者共同作用，先尝试使用强缓存，失败后再通过协商缓存机制决定是否使用缓存副本。
• 策略运用：开发者可以根据资源的更新频率和重要性灵活选择或结合使用这两种缓存策略，以达到最佳的性能优化效果。理解这两者的机制和差异，可以帮助开发者更好地设计网站的缓存策略，从而提升用户体验和网站性能。

为何浏览器缓存至关重要？

浏览器缓存的存在主要是为了优化网页加载速度和提升整体网站性能，尤其针对于频繁使用的前端静态资源，如HTML、CSS、JavaScript文件、图像等。

• 核心目的: 器缓存的核心在于复用已下载的资源。首次访问某个网页时，相关资源会被下载并存储在用户的本地计算机上。当用户再次访问同一页面或具有相同资源的其他页面时，浏览器优先检查本地缓存，如果资源未发生变化，则直接从缓存加载，避免了重新向服务器发起请求的过程。
• 减少服务器负担，提升性能: 通过缓存静态资源，服务器不必为同一资源的重复请求持续提供服务，显著降低了服务器的工作压力，提升了处理其他请求的能力，进而提高了整个网站的响应速度和服务能力。
• 加速客户端加载速度: 本地加载资源比从网络获取要快得多，因为避免了网络延迟和传输时间。这直接转化为更快的页面加载时间，为用户提供更加流畅的浏览体验。
• 减少网络数据传输: 频繁重用缓存资源，极大减少了通过网络传输的数据量，这对移动用户尤为重要，能够节省用户的数据流量费用，同时也减轻了网络拥堵状况。

浏览器刷新行为对比

刷新方式	场景	行为	响应情况
刷新（F5）	查看最新内容，利用缓存加速	携带验证头（If-Modified-Since, If-None-Match）请求服务器	- 304 Not Modified: 使用缓存 - 200 OK: 返回新资源
Ctrl+F5（强制刷新）	忽略缓存，强制获取最新版本	不带验证头，直接请求服务器新资源	始终 200 OK，提供最新内容
地址栏回车	类似首次访问，依据缓存策略	可能携带验证头，请求服务器确认	与 F5 相似，根据资源状态返回 304 或 200

总结

类型	描述
F5/地址栏回车	利用缓存策略，平衡加载速度与内容的新鲜度
Ctrl+F5	直接忽略本地缓存，确保每次请求都从服务器获取到最新的数据，适用于需要立即看到最新内容的场景

刷新行为对比概览

• 刷新（F5）

  • 场景：查看最新页面内容，同时利用缓存加速加载。
  • 行为：携带缓存验证头（If-Modified-Since, If-None-Match）请求服务器。
  • 响应：
    • 304 Not Modified: 使用缓存。
    • 200 OK: 服务器返回新资源。

• Ctrl+F5（强制刷新）

  • 场景：忽略所有缓存，强制获取最新版本。
  • 行为：不带缓存验证头，直接请求服务器新资源。
  • 响应：始终200 OK，提供最新内容。

• 地址栏回车

  • 场景：类似首次访问，根据缓存策略决定。
  • 行为：可能携带验证头，请求服务器确认。
  • 响应：与F5相似，依据资源状态返回304或200。

总结

• F5/地址栏回车：利用缓存策略平衡加载速度与内容更新。
• Ctrl+F5：直接忽略缓存，确保获取最新数据。