lang属性必须逐元素设置而非仅设根节点,否则导致读屏错误、标点间距异常、字体回退失效;所有语义化文本容器需显式声明lang,data-i18n须覆盖placeholder/alt/title等属性,动态DOM需手动触发翻译,语言包加载须校验MIME类型与fallback链。

只改 document.documentElement.lang 不会让页面真正“变成”另一种语言——文字不变、屏幕阅读器读错、标点间距乱、字体回退失效,这是绝大多数人踩的第一个坑。
lang 属性必须逐元素设置,不能只靠根节点继承
浏览器和辅助技术(如 VoiceOver、NVDA)不看父级 lang 值来决定文本渲染行为。它们逐个检查每个含文本元素自身的 lang 属性:标点宽度、连字规则、语音引擎选择、字体 fallback 链都依赖这个值。
-
<p>欢迎</p>即使document.documentElement.lang = 'zh-Hans',若该<p>没写lang="zh-Hans",仍可能被读作英文、顿号变窄、中文字体被日文字体覆盖 - 所有语义化文本容器都应显式加
lang:<h1 lang="zh-Hans">、<label lang="zh-Hans">、<footer lang="zh-Hans"> - 已有明确语言用途的元素(如
<pre lang="bash">、<code lang="sql">)切换语言时要保留原lang值,这是合法混排,不是 bug -
<title>和<meta name="description">不继承根节点lang,必须用 JS 单独更新
data-i18n 必须覆盖所有可翻译属性,不只是 textContent
data-i18n 默认只替换元素的 textContent,对 placeholder、alt、title、aria-label 等属性完全无效。漏掉任一后缀,对应文案就会卡在旧语言。
- 表单控件必须显式标注:
data-i18n-placeholder="search_hint"、data-i18n-alt="avatar_desc"、data-i18n-title="tooltip_info" -
value属性一般不翻译(属于用户输入数据),但<button>和<input type="submit">的显示文案建议统一走textContent更新,避免value被意外提交 - 含 HTML 结构的文案(如 “请阅读服务条款”)必须用
innerHTML替换,且语言包里对应值要是可信纯 HTML 片段(无用户输入、不执行 JS),否则有 XSS 风险 - 别在
<script>、<style>、<pre>内部加data-i18n——这些节点不参与文本渲染,JS 替换无效
动态插入的 DOM 必须手动触发翻译,不会自动监听
AJAX 加载的弹窗、分页表格新行、Tab 面板内容插入后,里面的 data-i18n 标记只是字符串,不会自动变成对应语言文本。DOM 插入和 i18n 处理是两件事,没有隐式绑定。
立即学习“前端免费学习笔记(深入)”;
- 弹窗打开后,需在
appendChild()或insertAdjacentHTML()后立即调用翻译函数,遍历新节点 - 分页表格每页请求返回新
<tr>,必须对这批新<tr>单独执行翻译逻辑,不能依赖全局扫描 - 不要用
MutationObserver自动监听——它无法区分哪些节点是待翻译的、哪些是代码片段或配置项,容易误触、性能差、难以调试 - 懒加载模块(如
import('./modal.js'))完成并挂载 DOM 后,也需同步触发翻译
语言包加载与 fallback 必须校验 MIME 类型和链路完整性
每次切语言都 fetch('/locales/zh.json') 不仅慢,还容易因 HTTP 状态码、Content-Type 错误导致静默失败,最终页面留白或部分文案消失。
- 服务器返回语言包时,
Content-Type必须是application/json,否则response.json()会抛错 -
fetch外层必须try/catch,内部检查response.ok和response.headers.get('content-type')?.includes('application/json') - fallback 顺序必须严格:先试完整 BCP 47 码(如
zh-HK)→ 再截主语言(zh)→ 最后退到默认语言(如en) - 所有语言包结构必须扁平、键名完全对齐;某语言暂未翻译也要保留键,设为空字符串,否则查不到 key 就留白
最易被忽略的是 <title> 和 <meta name="description"> 的更新时机——它们不在常规 DOM 扫描范围内,且影响 SEO 和分享卡片,必须在语言切换流程末尾单独处理。



















