前端缓存策略:强缓存与协商缓存深度剖析

通常我们利用缓存是提高用户体验、减少网络请求、提高页面加载速度。

正确使用缓存策略,能显著减少服务器负担,同时加速资源加载。

前端缓存主要有两种类型:强缓存协商缓存

一、强缓存(Cache-Control & Expires)

1.1 强缓存简介

强缓存是指在浏览器发起请求之前,直接从本地缓存中读取资源,而不需要再向服务器发送请求。如果资源在缓存中存在且没有过期,浏览器会直接加载缓存数据,不与服务器进行任何交互。这种方式可以极大减少请求时间,提高加载速度。

强缓存的控制主要依赖于两种 HTTP 头部信息:

  • Cache-Control :用来设置缓存策略的标准 HTTP 头部字段。常见的指令有 max-ageno-cacheno-store 等。
  • Expires:指定缓存的过期时间,过期后会重新请求资源。

1.2 Cache-Control 详解

Cache-Control 是强缓存策略的核心,它能更细粒度地控制缓存行为。常见的指令包括:

  • max-age: 设置缓存的最大有效时间(单位:秒)。比如 Cache-Control: max-age=3600 表示资源在缓存中有效 1 小时。
  • no-cache: 即使缓存中有资源,也会每次向服务器发起请求,进行验证。
  • no-store: 不缓存任何请求和响应。每次请求都会从服务器获取数据。
  • public: 资源可以被任何缓存(浏览器、CDN 等)缓存。
  • private: 资源只能被客户端缓存,不能被 CDN 等共享缓存缓存。
  • immutable: 表示缓存的资源永远不会变化,适用于一些静态资源如图片、字体文件等。

1.3 Expires 详解

Expires 头部指定资源的过期时间,在该时间点后,缓存会失效。它的值是一个绝对的日期时间,表示资源在此时间之前都是有效的。

复制代码
Expires: Wed, 21 Oct 2025 07:28:00 GMT

Cache-Controlmax-age 指令不同,Expires 指定的是一个具体的时间点,而不是相对时间。需要注意的是,Expires 是 HTTP/1.0 的标准,在 HTTP/1.1 中,推荐使用 Cache-Control 来代替。

1.4 强缓存的优缺点

优点

  • 减少网络请求,提高页面加载速度。
  • 降低服务器压力,节省带宽。

缺点

  • 强缓存一旦生效,在缓存过期之前,用户无法获取到更新后的资源。
  • 可能需要手动修改文件名或版本号,来保证资源的更新。

二、协商缓存(Last-Modified & ETag)

2.1 协商缓存简介

协商缓存是指浏览器在请求资源时,向服务器发送请求,并附带上本地缓存的条件信息(如资源的最后修改时间或 ETag),服务器根据这些条件判断资源是否被修改。如果资源没有变化,服务器会返回 304 状态码,告知浏览器继续使用本地缓存。这样,浏览器就能避免重复下载相同的资源。

协商缓存主要依赖于以下两个 HTTP 头部字段:

  • Last-Modified:资源的最后修改时间。
  • If-Modified-Since :浏览器在请求时,发送的上次缓存的 Last-Modified 时间。
  • ETag:资源的唯一标识符。
  • If-None-Match :浏览器发送的上次缓存的 ETag 值。

2.2 Last-Modified 与 If-Modified-Since

Last-Modified 是服务器在响应中返回的资源最后修改时间,浏览器会将其保存在缓存中。在下一次请求时,浏览器会将该时间通过 If-Modified-Since 头部发送给服务器。如果资源没有发生变化,服务器返回 304 状态码,告知浏览器使用本地缓存。

复制代码
Last-Modified: Tue, 01 Jan 2025 00:00:00 GMT

2.3 ETag 与 If-None-Match

ETag 是由服务器根据资源内容生成的一个唯一标识符,每次资源发生变化时,ETag 值也会变化。与 Last-Modified 不同,ETag 可以更精确地判断资源是否发生变化,因为它是根据资源内容生成的。

在请求时,浏览器会将上次缓存的 ETag 值通过 If-None-Match 发送给服务器,服务器根据这个值判断资源是否变化。如果没有变化,服务器返回 304 状态码。

复制代码
ETag: "abc123"

2.4 协商缓存的优缺点

优点

  • 可以精确判断资源是否发生变化,避免不必要的下载。
  • 相比强缓存,协商缓存能够更灵活地控制缓存的更新策略。

缺点

  • 每次请求都需要与服务器进行协商,即使资源没有变化,也需要进行一次请求(虽然返回的是 304 状态码,但依然会消耗一定的资源和时间)。
  • 需要服务器支持处理 ETagLast-Modified

三、强缓存与协商缓存的优缺点对比

|--------------|-----------------------------------|-------------------------|
| 特性 | 强缓存 | 协商缓存 |
| 缓存时间 | 固定时间(通过 max-ageExpires 控制) | 通过资源是否变更动态判断 |
| 是否与服务器交互 | 不与服务器交互 | 需要与服务器协商(发送条件请求) |
| 使用场景 | 静态资源,如图片、字体、CSS 文件等 | 动态内容、API 请求等 |
| 控制粒度 | 较粗粒度,依赖时间或版本号 | 较细粒度,基于资源内容的标识符 |
| 性能 | 性能最好,零请求 | 每次请求需要进行条件判断,但能有效减少无效请求 |

四、结合使用强缓存与协商缓存

强缓存与协商缓存往往是结合使用的。

例如,静态资源(如图片、字体等)可以使用强缓存,而动态数据(如用户信息、订单详情等)则可以使用协商缓存。

推荐的实践方式:

  1. 对于资源变化较少且更新频率较低的静态文件(如图片、脚本、样式表),可以使用强缓存。
  2. 对于资源变化较频繁的文件或需要实时获取最新内容的接口,可以使用协商缓存。
  3. 可以通过合理设置 Cache-ControlETag 来实现两者的结合,进一步优化前端性能。

五、总结

缓存是提升性能的一个非常重要的技术点。理解强缓存和协商缓存的工作原理,并合理选择和配置缓存策略,可以大幅度提高网页加载速度,减少网络延迟,提升用户体验。通过合理地结合强缓存与协商缓存,可以实现高效且灵活的缓存策略,为用户提供更流畅的浏览体验。

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪2 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom3 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端