document.title 是最直接有效的动态改标题方式，它直接控制html页面的标签内容，赋值后立即反映在浏览器标签页上，无需操作dom节点或重新渲染。
document.title 是最直接有效的动态改标题方式
HTML 页面的 <title></title> 标签内容，本质上由 JavaScript 的 document.title 属性控制。只要页面已加载，任何对它的赋值都会立即反映在浏览器标签页上，无需操作 DOM 节点或重新渲染。
常见错误是试图用 document.querySelector('title').textContent = '新标题' —— 这种写法虽然能改 DOM，但多数浏览器（Chrome、Firefox、Edge）**不会同步更新标签页显示**，属于无效操作。
-
document.title = '登录成功'—— 简洁可靠，兼容所有现代浏览器及 IE9+ - 在单页应用（SPA）中，路由切换后应立刻调用该语句，例如 Vue 的
beforeRouteUpdate或 React Router 的useEffect里 - 注意避免频繁设置（如每秒多次），虽无报错，但可能干扰用户对当前页面状态的感知
history.pushState 配合 title 参数的兼容性陷阱
调用 history.pushState(state, title, url) 时传入的 title 参数，在绝大多数浏览器中**被忽略**（Chrome 自 2015 年起、Firefox 自 2017 年起均不使用该字段更新标签页）。它只作为历史记录的元数据存在，无法替代 document.title。
所以以下代码不会改变页面标题：
立即学习“前端免费学习笔记（深入）”；
history.pushState({page: 'user'}, '用户页', '/user');
正确做法是显式设置：
history.pushState({page: 'user'}, '', '/user');
document.title = '用户页';
- 不要依赖
pushState的第二个参数自动更新标题 - 如果用
replaceState，同样需手动同步document.title - Safari 对
pushState的title字段支持更弱，实测完全无响应
服务端渲染（SSR）场景下首次标题的设定逻辑
服务端生成的 HTML 中，<title></title> 标签内容是静态的，必须由后端模板（如 EJS、Jinja2）或框架（Next.js、Nuxt）根据当前路由/数据注入。前端 JS 无法“提前”修改尚未解析的 <title></title> 标签。
典型误区：在 中放一段脚本试图改标题，但执行时机早于 <title></title> 解析完成 —— 结果是改了又会被服务端内容覆盖。
- SSR 页面首次加载，标题必须由服务端决定；JS 只能接管后续动态变更
- Next.js 使用
getStaticProps+Head组件；Nuxt 使用head()选项 - 若用纯 Node.js 拼 HTML，确保
<title>{{ pageTitle }}</title>中的变量已正确渲染
SEO 和 PWA 场景下标题更新的注意事项
搜索引擎爬虫（如 Googlebot）通常只抓取首屏 HTML 中的 <title></title>，不会执行 JS，因此动态修改的标题**不影响 SEO 排名**。PWA 添加到主屏幕后，首次启动也读取的是初始 HTML 中的标题。
这意味着：靠 document.title 实现的标题变化，对 SEO 和 PWA 启动图标下方文字无意义。
- 想提升 SEO，必须让关键页面的标题在服务端就准确输出
- PWA 的
manifest.json中name和short_name才决定添加到桌面后的显示名，与<title></title>无关 - 部分旧版微信内置浏览器会缓存首次加载的标题，即使 JS 修改了，分享卡片仍显示原始标题 —— 此时需配合微信 JSSDK 的
updateAppMessageShareData手动刷新
