移动体验 / 方法解读

网络客户端提示 Downlink 与 RTT 为何导致缓存失效

网络客户端提示 Downlink 与 RTT 的值变化频繁,若在响应 Vary 头中包含它们,会使资源无法被有效缓存。

确认 Vary 头是否包含网络提示

服务器在响应中声明了网络客户端提示,例如 Downlink 或 RTT,这些提示反映了用户的网络状况。如果服务器在响应的 Vary 头中包含了这些提示,浏览器会认为响应内容会根据它们的值而变化。例如,服务器可能返回 Vary: Downlink, RTT,这表明每次网络状况改变时,服务器都会提供不同的内容。浏览器必须为每个唯一的 Downlink 或 RTT 值创建新的缓存条目,而不是复用现有的缓存。

检查 Vary 头时,应确认其中是否列出了网络提示。如果 Vary 头中包含了 Downlink 或 RTT,浏览器将无法直接使用缓存的旧响应,因为旧响应可能不匹配当前的网络状况。这会导致每次请求都重新获取资源,增加了网络开销和页面加载时间。例如,如果用户从 Wi-Fi 切换到 4G 网络,Downlink 值发生变化,浏览器将无法使用 Wi-Fi 下的缓存响应,而是重新请求资源。

理解网络提示的动态特性

网络客户端提示如 Downlink 和 RTT 会随着网络环境的变化而频繁波动。Downlink 指示用户设备的下行网络带宽,而 RTT 指示往返时间。这些值不是静态的,用户可能在浏览过程中切换网络,或者网络状况发生波动。因此,包含这些提示的 Vary 头意味着缓存策略必须考虑这些动态变化。浏览器无法预测下一次请求时的网络状况,因此无法有效地缓存响应。

由于网络提示的动态特性,包含它们的 Vary 头实际上会使资源变得难以缓存。每次网络状况变化,都会生成一个新的缓存键,导致缓存命中率降低。例如,用户在浏览过程中网络速度从 10Mbps 降至 5Mbps,RTT 从 20ms 增加到 50ms,浏览器将无法使用之前的缓存响应,而是重新请求资源。这种机制虽然保证了内容的准确性,但牺牲了缓存效率。

排查缓存失效的具体步骤

要排查缓存失效的问题,首先需要检查服务器响应头中的 Vary 字段。使用浏览器开发者工具或网络监控工具,查看目标资源的响应头,确认 Vary 头中是否包含了 Downlink 或 RTT。如果发现这些提示被包含在 Vary 头中,可以尝试移除它们,看看缓存是否恢复正常。例如,将 Vary 头从 Vary: Downlink, RTT 改为 Vary: Accept,以允许浏览器根据其他因素缓存资源。

在移除 Vary 头中的网络提示后,验证缓存是否生效。可以通过多次请求同一资源,观察浏览器是否直接从缓存中加载资源,而不是重新发起网络请求。如果缓存恢复正常,说明问题确实是由网络提示导致的缓存失效。例如,移除 Vary 头后,第二次请求时浏览器不再显示网络活动,而是直接从缓存中读取资源,这表明缓存策略已恢复正常。

判断缓存失效的结果

判断缓存是否失效的方法是观察网络请求的行为。如果每次请求都触发新的网络活动,且响应头中包含网络提示的 Vary 头,说明缓存确实失效了。浏览器无法复用缓存,因为网络状况的变化导致缓存键不匹配。例如,用户在浏览过程中网络速度波动,每次波动都会导致重新请求资源,这表明缓存策略未能有效利用缓存。

如果移除 Vary 头中的网络提示后,缓存恢复正常,说明之前的缓存失效是由这些提示引起的。浏览器能够根据其他因素(如 URL 或 Accept 头)复用缓存,减少了网络请求。例如,移除 Vary 头后,用户在短时间内多次刷新页面,资源加载速度明显加快,且没有新的网络请求,这表明缓存策略已恢复正常,缓存失效问题已解决。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. HTTP Client hints - HTTP | MDN ↗
← 更多移动体验文章返回顶部 ↑