最有效的国际化方案是预加载主语言包+懒加载非主语言+内联关键文案。主语言包随html内联，非主语言包按需fetch；批量更新data-i18n元素，跳过不可见节点；语言包用扁平结构，文件名小写无特殊字符；切换时同步更新title和meta。
直接加载语言包会拖慢首屏——关键不是“怎么切语言”，而是“怎么让语言切换不卡住用户”。最有效的做法是预加载主语言包 + 懒加载非主语言 + 内联关键文案，而不是等切换时再 fetch。
language pack 加载时机怎么选
浏览器首次访问时，同步加载完整语言包（比如 en.json）必然阻塞渲染；但完全异步又会导致文案闪动或空白。折中方案是：主语言包随 HTML 一起内联，非主语言包按需懒加载。
- 服务端渲染或构建时，将用户首选语言（
navigator.language或 Accept-Language）对应的语言包 JSON 字符串内联进<script></script>，例如：<script id="i18n-data">window.I18N_DATA = {"welcome": "Hello" };</script> - 切换到其他语言时，才用
fetch('locales/zh.json')加载，且加cache: 'immutable'和credentials: 'same-origin' - 避免在
DOMContentLoaded后才开始加载语言包——此时 DOM 已就绪，但文案还没填，用户看到的是空白或占位符
data-i18n 属性怎么避免重排重绘
逐个遍历 DOM 更新 textContent 或 placeholder 会触发多次 layout，尤其在长列表或复杂表单里明显卡顿。核心是批量操作 + 跳过不可见节点。
- 用
document.querySelectorAll('[data-i18n]')一次性获取所有目标元素，别用querySelectorAll('*[data-i18n]')——后者会扫全树，开销大 - 更新前调用
document.documentElement.setAttribute('lang', langCode)，再统一更新文本，避免反复修改lang属性 - 对
display: none或visibility: hidden的元素跳过翻译——它们不在渲染流里，没必要处理 - 表单控件的
label、option、textarea等要单独处理，data-i18n不会自动作用于子节点
JSON 语言包结构对解析性能的影响
扁平键名比嵌套对象快 2–3 倍（V8 引擎实测），尤其在低端安卓 WebView 中差异更明显。深嵌套还增加 JS 查 key 的路径长度和出错概率。
- 必须用顶层键值对：
{"header_title": "Home", "btn_submit": "Submit"}，禁止{"ui": {"header": {"title": "Home"}} - 空字符串
""比undefined安全——JS 查不到 key 时返回undefined，直接赋给textContent会变成字符串"undefined" - 语言包文件名必须小写、无空格、无特殊字符：
locales/en.json✅，locales/EN.json❌（大小写敏感，CI/CD 环境易出错） - 加载失败时 fallback 到内联主语言数据，而不是二次 fetch ——网络波动下重复请求只会延长白屏时间
最容易被忽略的是：语言切换后，document.title 和 meta[name=description] 必须同步更新，否则 SEO 和分享卡片仍显示旧语言内容；而这两项常被漏掉，因为它们不在 data-i18n 覆盖范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
