我要招人

前端/移动开发面试题更新 2026-08-05

在一个前端项目中，你会怎样设置 HTTP 缓存策略来优化资源加载性能？请说明具体的配置方法。

前端/移动开发性能优化技术原理技术选型HTTP

考察说明

考察候选人对前端 HTTP 缓存机制的理解以及在实际项目中的配置能力。

回答思路

  1. 【回答框架 1】HTTP 缓存主要分为强缓存和协商缓存。强缓存通过 Cache-Control 和 Expires 响应头实现，浏览器在缓存有效期内直接使用本地副本，不再发送请求。协商缓存则通过 Last-Modified/If-Modified-Since 和 ETag/If-None-Match 实现，需要向服务器发送请求验证资源是否变化。
  2. 【回答框架 2】配置策略通常基于资源类型区分：对于 HTML 文档，一般使用协商缓存或不缓存，确保每次访问都能获取最新版本；对于静态资源如 JavaScript、CSS、图片等，可以使用强缓存，并配合文件名指纹（如哈希值）来更新缓存，实现高效加载和即时更新。
  3. 【回答框架 3】具体配置可通过服务器或构建工具完成，如 Nginx 配置可以设置 Cache-Control 和过期时间；Webpack 构建时可以生成带哈希的文件名，并在 HTML 中引用，从而控制缓存。还可以使用 CDN 来进一步优化缓存命中率。
  4. 【回答框架 4】对于版本更新频繁的资源，可以采用协商缓存配合 ETag，确保资源变化后能及时返回新版本；对于长期不变的资源，可以设置较长的 max-age，减少重复请求。还需注意兼容性，如 Expires 和 Cache-Control 的优先级问题。
  5. 【关键点 1】强缓存优先于协商缓存，Cache-Control 的 max-age 优先于 Expires。
  6. 【关键点 2】静态资源使用强缓存加文件名指纹，HTML 使用协商缓存或禁用缓存。
  7. 【关键点 3】合理配置可显著减少网络请求，提升页面加载速度。
  8. 【易错点 1】不要对所有资源设置相同的过期时间，需根据资源变更频率调整。
  9. 【易错点 2】忽略 CDN 缓存策略可能导致资源未及时更新。
  10. 【易错点 3】不配合文件名指纹的强缓存会导致资源更新后用户仍使用旧版本。