移动端静态资源缓存失效？检查 Cache-Control 的 max-age 设置
移动端静态资源缓存失效会导致重复请求，本文通过检查响应头中的 max-age 指令来排查缓存策略是否正确配置。
检查响应头中的 max-age 指令是否存在
在移动端浏览器中打开开发者工具的 Network 面板，找到需要检查的静态资源文件，如 CSS 或 JS 文件。点击该文件查看 Response Headers，重点查找 Cache-Control 字段。如果该字段不存在，说明服务器没有配置缓存策略，浏览器将无法缓存该资源，每次访问页面时都会重新下载。正确的做法是确保响应头中包含 Cache-Control: max-age=XXXXX，其中 XXXXX 为秒数。
如果存在 Cache-Control 字段，但值中没有 max-age 指令，例如只有 no-cache 或 no-store，这同样会导致缓存失效。no-cache 指令要求在缓存前必须与服务器验证，虽然能保证内容新鲜度，但无法利用本地缓存减少网络传输。no-store 指令则明确禁止存储任何响应，浏览器每次都会向服务器请求完整内容。对于移动端静态资源，应优先设置明确的 max-age 值以提升加载速度。
验证 max-age 的数值是否合理
确认 max-age 指令存在后，需要检查其数值是否合理。根据 HTTP 缓存规范，max-age 定义了资源从生成到变为“陈旧”的时间间隔。例如，设置 max-age=3600 表示资源在服务器生成后的一小时内是新鲜的。如果数值设置过小，如 max-age=60，会导致资源频繁过期，无法有效利用缓存；如果数值设置过大，如 max-age=31536000（一年），一旦资源内容更新，用户可能长时间无法获取到最新版本。
合理的设置应根据资源的更新频率来决定。对于不常变动的静态资源，如 CSS 框架或 JS 库，可以设置较长的 max-age，例如 31536000 秒。对于可能频繁更新的内容，如用户头像或动态数据，应设置较短的 max-age，例如 3600 秒。通过调整 max-age 的数值，可以在保证内容新鲜度的同时，最大化缓存带来的性能提升。
检查是否误用了 no-store 指令
在排查过程中，有时会发现 Cache-Control 字段中包含 no-store 指令，这会直接导致缓存失效。no-store 指令告诉浏览器不要存储任何响应，包括临时缓存。这通常用于敏感数据或需要实时更新的内容，但对于静态资源来说，使用 no-store 会完全失去缓存的优势。检查响应头时，如果发现 no-store，应将其移除或替换为 max-age 指令。
除了 no-store，还需要注意 no-cache 指令的误用。no-cache 指令要求在缓存前必须与服务器验证，虽然能保证内容新鲜度，但无法利用本地缓存减少网络传输。对于移动端静态资源，应优先设置明确的 max-age 值以提升加载速度。如果必须使用 no-cache，应确保配合 ETag 或 Last-Modified 头部进行验证，以减少不必要的网络请求。
确认缓存策略是否与资源类型匹配
不同的资源类型应采用不同的缓存策略。例如，HTML 文档通常不缓存或缓存时间较短，因为内容可能频繁更新；而 CSS 和 JS 文件可以缓存较长时间。检查响应头时，应确保 Cache-Control 设置与资源类型匹配。如果发现所有资源都使用了相同的缓存策略，可能导致某些资源缓存时间过长或过短。
此外，还需要检查是否正确设置了 private 或 public 指令。private 指令表示缓存仅限于特定客户端（如浏览器），适用于个性化内容；public 指令表示缓存可以共享（如代理服务器），适用于公开内容。对于移动端静态资源，通常使用 public 指令以允许 CDN 或代理缓存。如果发现缓存策略与资源类型不匹配，应根据实际情况调整 Cache-Control 字段。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。