document.title赋值是唯一有效方式，需确保DOM就绪、同步更新history.state、检查构建插件覆盖、控制标题长度与字符安全。
document.title 赋值就能改，但时机、同步、SEO 和字符处理这四块不注意，标题就“看起来改了，实际没生效”。
为什么 document.querySelector('title').textContent = '新标题' 不起作用
浏览器标签栏标题和 DOM 中的 <title> 节点是两套机制。修改 DOM 节点只影响 HTML 结构树，不会触发浏览器 UI 层的标题刷新。实测中，哪怕你用 innerHTML 或 replaceChild 重写整个 <title> 标签，标签页文字依然不变。
唯一被浏览器识别并立即响应的方式只有：
-
document.title = '新标题'—— 直接赋值，无须 DOM 查询 - 必须确保脚本执行时
document已可用（推荐在DOMContentLoaded后或</body>前） - IE6–8 需确认
<meta charset="utf-8">存在且位置在<title>之前，否则中文可能乱码
document.title 改了，但后退时标题又变回去了
这是单页应用（SPA）最常踩的坑：document.title 不会自动更新当前 history 记录中的 title 字段。用户点击后退/前进，浏览器展示的是 history.state 里存的老标题，不是你刚设的。
立即学习“前端免费学习笔记（深入）”；
正确做法是同步调用 history.replaceState()：
document.title = '订单详情 #8892';
history.replaceState(
{ ...history.state },
'订单详情 #8892',
location.href
);
漏掉这一行，就可能出现标签页标题和地址栏历史标题不一致；分享到微信时，卡片取的也是 history.state 里的旧 title，不是你 JS 设的。
构建工具（Vite/Webpack）里改不动 <title>
很多项目用 vite-plugin-html 或 html-webpack-plugin 自动生成 <title>，你手写的 <title>首页</title> 在构建产物里根本不存在——它被插件配置项（如 title: '我的网站'）覆盖了。
排查方法很简单：
- 别看源码，直接打开最终生成的
dist/index.html，搜<title> - 检查插件配置是否启用了
inject: true和templateParameters - 若需动态注入，优先用插件支持的变量方式（如
<%= title %>），而不是硬编码
标题长度、字符与 SEO 的隐性限制
搜索引擎通常只索引前 50–60 字符，移动端标签栏显示更窄（12 个汉字就可能截断）。更隐蔽的问题是字符本身：
- 未转义的
&会被解析为 HTML 实体开头，应写成& 和 <code>>必须写成<和>，否则破坏 HTML 结构- 全角空格、零宽空格（U+200B）、控制字符（如
\x00）可能导致静默失败或渲染异常 - emoji 和生僻 Unicode 在部分旧爬虫中无法索引，建议避免用于核心关键词
动态拼接时，别依赖浏览器帮你截断或清理：手动用 String.prototype.trim() 去首尾空格，再用 title.substring(0, 50) 控制长度。
