document.title赋值不会自动更新history.state.title，必须手动调用history.replaceState同步；所有现代浏览器均忽略pushState的title参数，仅document.title生效，SPA中不一致会导致分享卡片、PWA横幅及无障碍工具标题错误。
document.title 赋值不会自动更新 history.state.title
这是最常被忽略的逻辑断层：执行 document.title = "订单详情" 后，标签栏立刻变，但浏览器历史栈里当前记录的 title 字段仍维持原值。用户点「后退」再回来，地址栏显示的还是旧标题——尤其在单页应用（SPA）中，这个不一致会直接暴露在微信分享卡片、PWA 安装横幅、甚至部分屏幕阅读器里。
必须手动同步：
-
history.replaceState()是唯一安全方式：调用history.replaceState(history.state, "订单详情", location.href) - 若用
history.pushState()跳转新页，title参数已被 Chrome（2015年起）、Firefox（2017年起）、Safari（实测完全无效）忽略，不能依赖 - Vue Router 的
beforeRouteUpdate或 React Router 的useEffect里，要先设document.title，再调replaceState，顺序反了会导致短暂闪烁
history.pushState 的 title 参数根本不可靠
几乎所有现代浏览器都不拿 history.pushState(state, title, url) 的第二个参数当真。它只作为元数据存进历史记录，不触发 UI 更新，也不影响标签栏显示。写成 history.pushState({page: 'user'}, '用户页', '/user')，标题不会变；写成 history.pushState({page: 'user'}, '', '/user')，效果一样——都得靠 document.title 单独赋值。
兼容性陷阱：
立即学习“前端免费学习笔记（深入）”；
- Safari 对该字段支持最弱，连历史记录里都可能不保存
- Chrome 和 Firefox 保留字段但不读取，开发者工具里能看到它存在，但 UI 无响应
- 别把它当 fallback，它不是备用方案，而是冗余字段
SPA 中标题与 history 不一致的实际后果
表面看只是“后退回来标题不对”，但真实影响更隐蔽：
- 微信/QQ 内置浏览器分享时，抓取的是
history.state.title，不是document.title→ 分享卡片标题错 - PWA 安装提示横幅显示的标题来自 history 记录 → 用户看到的是上一页的标题
- 部分无障碍工具（如 VoiceOver）读取页面标题时，优先读 history 中的 title 字段 → 视障用户感知错乱
- 测试时容易漏：DevTools 的 Application → History 面板里能直接看到各条记录的
title值，建议每次路由跳转后手动核对
截断、转义、空值这些细节决定是否真正生效
即使同步了 document.title 和 history.replaceState()，标题仍可能在某些场景下失效：
- 标题为空字符串（
document.title = ""）会导致部分浏览器静默失败，至少填一个空格或占位符 - 含 HTML 实体（如
&、<）不会自动解码，需提前处理：const el = document.createElement('div'); el.innerHTML = rawTitle; document.title = el.textContent - 超长标题（Windows 任务栏约 40 字符就截断）建议用
Math.min(title.length, 50)截断，而不是依赖浏览器行为 - 开头是控制字符（如
\x00）或纯符号（如• 订单页），某些 WebView 会跳过识别，导致标题“消失”
document.title 和 history.state.title 始终严格一致——中间任何一个环节漏掉，问题就会出现在用户分享、安装或回退的瞬间。 
