Chrome点击后退按钮后标签页标题未同步document.title问题

根因说明 #

该异常是Chrome浏览器前进/后退缓存（bfcache）的已知渲染bug，和Service Worker机制无直接关联：当页面通过bfcache从历史栈恢复时，Chrome会优先读取历史条目上缓存的标题快照渲染标签页，不会同步监听document.title的实际值变化；此时即便DOM中document.title取值正确，标签栏渲染层也不会触发重绘，手动在DevTools修改title同样无法触发更新，只有整页刷新能重置渲染状态。Firefox未实现同逻辑的bfcache标题缓存策略，因此无该问题。

可落地解决方案 #

• 全局路由守卫绑定标题强制重绘逻辑
  直接给document.title重复赋相同值时Chrome会跳过渲染流程，因此通过临时值中转强制触发标签重绘，适配所有路由跳转（包括后退触发的popstate场景）：

  // 原生JS场景可监听popstate事件，React Router/Vue Router等路由库场景直接放到全局后置路由守卫即可
  function forceSyncTitle() {
    const realTitle = document.title
    document.title = ' ' // 注意这里用空格而非空字符串，部分Chrome版本空字符串不会触发重绘
    requestAnimationFrame(() => {
      document.title = realTitle
    })
  }
  window.addEventListener('popstate', forceSyncTitle)
  

• 同步更新历史栈条目标题
  所有修改页面标题的场景统一走封装方法，赋值document.title的同时调用history.replaceState同步更新当前历史记录存储的标题，从根源避免历史快照和实际DOM标题不一致：

  function updatePageTitle(title) {
    document.title = title
    // 同步更新当前历史条目的title字段
    history.replaceState(history.state, title, window.location.href)
  }
  

• 禁用bfcache（性能换一致性）
  如果不需要bfcache带来的往返加载性能提升，可以通过配置响应头直接禁用该页面的bfcache缓存，后退时Chrome会重新执行页面完整生命周期，不会读取旧的标题快照：

  Cache-Control: no-store
  

  也可以通过给页面绑定空的unload事件监听实现相同效果（Chrome检测到unload监听会自动禁用bfcache）：

  window.addEventListener('unload', () => {})
  

避坑提示：直接修改<title>标签的textContent属性和赋值document.title走的是同一套DOM更新逻辑，在标签渲染卡死的场景下无法触发重绘，不要用这个方式尝试绕开问题。

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