最轻量可行路径是用data-i18n标记+外部json语言包+同步更新document.documentelement.lang；需为所有可翻译文本节点显式添加data-i18n属性，区分textcontent/innerhtml/属性替换场景，并确保动态dom、fallback、lang继承、滚动定位及第三方内容全覆盖。
直接用 data-i18n 标记 + 外部 JSON 语言包 + 同步更新 document.documentElement.lang，是当前最轻量、可调试、不依赖框架的可行路径。硬编码文案、只改根节点 lang、或靠 CSS 类显隐双语 DOM，都会在 SEO、可访问性、动态内容和 fallback 场景中出问题。
怎么给 HTML 元素打 data-i18n 标记才不会漏掉关键属性
所有要翻译的文本节点（<h1></h1>、<p></p>、<button></button>、<label></label>）必须显式加 data-i18n 属性，值为英文小写+下划线键名，比如 "nav_home"；但仅设这个不够：
-
placeholder、title、alt这类属性不会被textContent覆盖，得额外加对应后缀：如data-i18n-placeholder="search_hint" -
value一般不翻译（表单输入值属于用户数据），跳过处理；但<label></label>的文字必须标记 - 含 HTML 结构的文案（如“请阅读使用条款”）需用
innerHTML替换，且语言包里对应值必须是可信纯 HTML 片段，否则有 XSS 风险 - 动态插入的 DOM（弹窗、AJAX 表格行）插入后必须立即调用翻译函数，否则不会自动生效
- 别在
<script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre>内部加data-i18n——这些节点不参与渲染，JS 替换无效
JSON 语言包怎么组织和加载才不容易翻车
每个语言一个独立文件，路径统一为 ./locales/${lang}.json，例如 ./locales/zh.json、./locales/en.json。结构必须扁平、键名严格一致：
- 所有文件字段完全对齐，某语言暂未翻译也要保留键，设为空字符串：
"btn_submit": ""，否则查不到 key 就留白 - 加载时用
fetch()，别硬编码对象到 JS 里；加try/catch包裹fetch和response.json() - fallback 顺序必须是：先试完整码（如
zh-HK），再截主语言（zh），最后退到默认语言（如en） - 服务器返回 JSON 时，HTTP
Content-Type必须是application/json，否则fetch可能静默失败
切换语言时为什么页面会闪动或读错语音
只替换文本、只改 document.documentElement.lang，屏幕阅读器仍按旧语言朗读，字体回退和标点间距也会错——因为浏览器和辅助技术按每个元素自身的 lang 属性决定行为，不是继承来的。
- 切换前必须遍历所有已带
lang属性的元素（如<p lang="en"></p>、<pre class="brush:php;toolbar:false;" lang="bash"></pre>），把它们的lang值也同步更新（除非明确要保留原语言） - 更新 DOM 前，用
getComputedStyle记录滚动位置；更新完再window.scrollTo()恢复，否则页面会跳回顶部 - 如果用了
moment.js，记得调用moment.locale('en')；若用原生Intl，需重建所有格式化实例，不能复用旧对象 - 表单控件的
option文字、SVG 内嵌文本（<text></text>）、JS 动态生成的 Toast，都得单独处理，不能只靠静态 HTML 属性
真正麻烦的不是加 data-i18n，而是那些没显式标记却该翻译的地方：select 的 option、动态插入的提示框、第三方组件内部文案、甚至 aria-label 这种辅助属性——它们容易被忽略，但一旦漏掉，用户就卡在半中文半英文的体验里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
