document.title 是唯一可靠、兼容所有现代浏览器的方式，其他操作如 querySelector('title').textContent 或 innerHTML 无效，因 DOM 值与 UI 显示标题是两条独立通路；history 标题需手动用 replaceState() 同步；动态标题需截断长度并解码 HTML 实体。
直接赋值 document.title 是唯一可靠、兼容所有现代浏览器的方式，其他操作（如改 <title> 元素内容）基本无效或有风险。
为什么不能用 querySelector('title').textContent 或 innerHTML
很多人写 document.querySelector('title').textContent = '新标题'，发现标签栏完全没变——这不是 bug，是规范行为。<title> 元素的 DOM 值和浏览器 UI 显示的标题是两条独立通路。现代浏览器允许你读写该节点，但不会同步到标签页；IE6–8 甚至根本不支持这种写法。更危险的是：document.head.innerHTML += '<title>新标题</title>' 会清空已加载的 CSS、JS 和 preload 指令，导致页面闪退或资源重复请求。
document.title 赋值后 history 标题不一致怎么办
执行 document.title = '用户详情' 不会自动更新当前 history 记录里的 title 字段。用户点击“后退”回到该页时，地址栏仍显示旧标题。单页应用（SPA）中必须手动同步：
- 用
history.replaceState()更新当前记录：history.replaceState(history.state, '用户详情', location.href) - 若用
pushState()跳转新页，应把新标题作为第二个参数传入：history.pushState({page: 'user'}, '用户详情', '/user/123') - 漏掉这一步，微信/QQ 分享卡片、PWA 安装横幅、甚至某些屏幕阅读器都可能抓取到错误标题
动态拼接标题时容易踩的字符与长度坑
标题支持中文、emoji 和 Unicode，但实际显示受系统、字体和长度限制影响：
立即学习“前端免费学习笔记（深入）”；
- Windows 任务栏通常截断超 40 字符，iOS 标签页约 50 字符后加省略号；建议用
Math.min(title.length, 50)截断 - 用户输入或 API 返回的标题若含 HTML 实体（如
&、<），浏览器不会自动解码，需手动处理：title.replace(/&/g, '&').replace(/</g, '，或更稳妥地用临时 div 解析：<code>const el = document.createElement('div'); el.innerHTML = rawTitle; document.title = el.textContent - 避免控制字符（如
\x00）和开头纯符号（如• 订单页），部分爬虫或 WebView 会跳过识别
SEO 和服务端渲染下 document.title 的真实作用边界
搜索引擎爬虫只读取 HTML 源码中的 <title> 内容，不执行 JS。这意味着：
- 纯客户端渲染（CSR）站点：爬虫永远看到入口页的原始标题，
document.title对 SEO 零贡献 - 服务端渲染（SSR）或静态生成（如 Next.js/Nuxt）：首屏标题必须由服务端输出，JS 修改只是用户体验增强
- 微信/QQ 内置浏览器分享卡片：读取的是初始 HTML 中的
<title>，JS 后续修改完全不影响 - 构建工具（如 Vite 插件）可能覆盖你写的静态
<title>，要检查最终生成的dist/index.html，而非源码
最常被忽略的一点：标题不是纯展示字段，它参与 history.state 关联、PWA 安装文案生成、甚至页面唯一性判定。一旦为空、滞后或错位，整个导航上下文就可能断裂。
