不同浏览器历史后退/前进按钮页面加载行为差异咨询

观察到的后退/前进操作直接恢复页面完整状态、而非重新加载的行为，是现代浏览器内置的**后退/前进缓存（Back/Forward Cache，简称bfcache）**特性。该特性独立于标准HTTP缓存体系，因此常规HTTP缓存响应头不会对其生效。

核心机制 #

bfcache是浏览器为提升导航流畅度设计的内存级快照能力：用户离开页面时，浏览器会将当前页面的完整DOM状态、JS执行上下文、滚动位置、表单输入内容等全部运行态数据存入内存；用户触发后退/前进导航回到该页面时，浏览器直接从内存读取快照恢复页面，无需重新发起网络请求、解析HTML或执行页面初始化脚本，导航耗时可降低至几十毫秒级别。
该机制天然存在展示过时数据的可能，需要开发者主动做兼容处理。

不同测试场景的行为差异原因 #

各浏览器对bfcache的启用进度、触发规则存在差异，和对照测试得到的结果完全对应：

• Chrome 102：该版本的bfcache处于灰度放量阶段，默认仅对公网域名生效，localhost开发环境被纳入默认排除范围；同时打开DevTools时Chrome会自动禁用bfcache以适配常规调试逻辑，因此只有公网访问且DevTools关闭时才会触发快照恢复。
• Safari 15：Safari是最早全量落地bfcache的主流浏览器，该版本已对所有访问场景（含localhost）默认开启bfcache，且打开DevTools不会自动禁用该特性，因此所有测试场景下都会触发快照恢复。
• Opera 88：基于Chromium内核，bfcache灰度规则与Chrome基本一致，仅未将“打开DevTools”列为禁用条件，因此公网访问时无论是否开启DevTools都触发快照恢复，localhost环境下不触发。
• Firefox 101、Edge 102：这两个版本发布时，对应浏览器的bfcache特性还未完成全量推送，因此后退/前进导航走传统的页面重载逻辑，不会触发快照恢复。

关于响应头不生效的说明 #

测试中涉及的两类环境响应头如下：
localhost环境响应头：

Connection: keep-alive
Date: Thu, 23 Jun 2022 08:58:01 GMT
ETag: W/"57cf-+fmYAdB1w1b8e3hCMCGT2IIRFCg"
Keep-Alive: timeout=5

公网环境响应头：

cache-control: max-age=0
date: Thu, 23 Jun 2022 10:10:23 GMT
expires: Thu, 23 Jun 2022 10:10:23 GMT

其中公网环境配置的cache-control: max-age=0属于标准HTTP缓存控制规则，仅作用于普通的页面资源磁盘缓存逻辑，无法影响内存级的bfcache快照存储，因此即使配置了不缓存普通页面资源的规则，bfcache依然会正常触发。

bfcache的常用控制方式 #

• 若需要禁用bfcache，可给页面响应头添加Cache-Control: no-store，主流浏览器均会识别该头跳过bfcache快照存储；
• 页面注册unload事件监听、存在未关闭的WebSocket/WebRTC等长连接时，浏览器也会自动跳过bfcache存储。
• 若需要在bfcache恢复时更新过时数据，可监听pageshow事件，当事件的persisted属性为true时即代表页面从bfcache恢复，此时可执行动态数据刷新逻辑，参考代码：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 此处执行动态数据拉取、状态更新逻辑，也可直接调用location.reload()重载页面
  }
})

内容的提问来源于stack exchange，提问作者Minkiele