国际化资源异步加载不崩DOM的关键是时机可控：fetch后缓存至全局，待DOMContentLoaded或框架mounted阶段再渲染，避开框架接管区，禁用document.write和innerHTML直接注入，预埋template片段替换以避免闪屏。
国际化资源怎么异步加载不崩 DOM？
直接用 fetch + document.write 或 innerHTML 注入翻译包，大概率导致页面重绘错乱、DOM 节点丢失、事件监听器失效——因为翻译文本插入时，原 DOM 可能还没挂载完，或者正被框架（如 Vue/React）接管。
安全做法是等 DOM 就绪再注入，且避开框架接管区域。关键不是“快”，而是“时机可控”：
-
fetch拿到语言包后，不要立刻操作 DOM；先缓存到全局对象（如window.i18nData），等DOMContentLoaded或框架的mounted/useEffect阶段再触发渲染 - 若用模板字符串替换（如
text.replace(/{{key}}/g, ...)），确保所有占位符已在 HTML 中静态存在，否则替换后可能漏掉节点 - 避免在
head里用document.write动态写<script>加载语言包——这会清空整个文档
多语言包加载顺序怎么控制？
用户切换语言时，不能让 zh-CN.js 和 en-US.js 同时加载、互相覆盖；也不能让新语言包还没就绪，旧翻译就被清空导致 UI 显示 {{missing_key}}。
核心是加一层加载状态锁和版本标识：
立即学习“前端免费学习笔记（深入）”；
- 每个语言包加载前生成唯一
loadId（如Date.now() + '_' + lang），存入window.currentLoadId -
fetch成功后，先比对当前loadId是否仍匹配；不匹配说明已被新请求覆盖，直接丢弃结果 - 用
Promise.allSettled并行拉多个语言包（如基础包 + 业务模块包），但合并逻辑必须按声明顺序执行，不能依赖返回顺序 - 慎用
import('./locales/' + lang + '.js')：Webpack 动态导入会走 chunk 加载机制，但错误时不会 reject，需手动检查导出对象是否存在default或messages
HTML 中硬编码文案怎么异步替换又不闪屏？
页面首次渲染时，浏览器看到的是中文文案；等 JS 加载完语言包，再替换成英文——中间必然出现文案跳变，用户体验差。
工程化解法不是“等 JS”，而是“让 HTML 带初始语言态”：
- 服务端根据
Accept-Language或 cookie 渲染对应语言的 HTML，JS 只负责后续动态更新（如日期格式、数字单位） - 若必须纯前端，用
<template id="i18n-fragments">预埋所有语言的文案片段，加载完成后再用replaceChild替换对应节点，避免重排 - 对按钮、标题等关键文案，加
data-i18n-key属性，用querySelectorAll('[data-i18n-key]')批量更新，比遍历 textContent 更稳定 - 禁用
visibility: hidden等 CSS 控制显示时机——它会让屏幕留白，反而更显卡顿
webpack / vite 构建时怎么拆分语言包？
构建产物里把所有语言打包进一个 locales.js，等于没做异步——用户只看中文，却要下载 10MB 英日韩德法西语。
真正有效的拆分，得让打包工具生成独立 chunk，并由运行时决定加载哪个：
- vite 中用
import(`../locales/${lang}.json`)，配合build.rollupOptions.output.manualChunks按目录拆包 - webpack 需配
splitChunks.chunks: 'all'+name: 'locale-${lang}'，否则import()生成的 chunk 会被合并回主包 - 注意：JSON 文件默认不参与 tree-shaking，
zh-CN.json里没用的 key 不会自动剔除；建议用脚本预处理，只保留当前页面用到的 key - CDN 缓存策略要设为
immutable，因为语言包内容变更频率低，但路径含哈希（如zh-CN.abc123.json），避免缓存污染
最易被忽略的点：语言包加载失败时，降级逻辑不能只 fallback 到 English——得 fallback 到当前页面最初渲染的语言（即 HTML 里自带的那个），否则用户切到日语失败后，突然看到中文界面，会误以为切换成功了。
