最轻量可行路径是data-i18n标记+json语言包+同步更新document.documentelement.lang；需显式为所有文本节点及placeholder/title/alt等属性添加对应data-i18n后缀，语言包扁平结构、bcp 47命名，切换时同步更新lang属性、localstorage及动态节点。
直接用 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的文字必须标记 - 含 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()恢复，否则页面跳回顶部 - 时间/数字字段需重建
Intl.DateTimeFormat或Intl.NumberFormat实例，不能复用旧对象 - 别用
window.location.reload()强刷——表单清空、状态丢失、SEO 不友好
如何确定最终该用哪种语言
浏览器 navigator.language 不可靠（隐私模式可能为空、安卓 WebView 返回错误值），纯前端检测也不支持 SSR。最稳的方式是服务端通过 Accept-Language 请求头解析首选语言，并注入为 document.documentElement.lang 或全局变量。
- 前端初始化时优先读取
document.documentElement.lang，fallback 到navigator.language，再 fallback 到默认语言（如en） - 允许用户通过 URL 参数（如
?lang=ja）或localStorage覆盖，但localStorage不能用来覆盖服务端判断——它可能过期，新设备首次访问也没值 - BCP 47 标准必须遵守：
zh-Hans可以，zh_CN或chinese会被忽略甚至触发 fallback 失败
真正容易被忽略的是：语言包加载失败时页面全白、子元素 lang 属性没同步、动态插入内容没翻译、以及 Intl 实例未重建——这些点不出现在控制台报错里，但用户一换语言就感知明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
