同步加载语言包会致首屏白屏，因xmlhttprequest同步请求（async: false）彻底阻塞html解析与渲染，直至json下载解析完成；应改用defer+preload结合localstorage缓存优化。
为什么同步加载语言包会让首屏变白
用 XMLHttpRequest 同步请求（async: false）加载 en.json 或 zh.json，会彻底阻塞 HTML 解析和渲染——浏览器卡在脚本执行上，直到 JSON 下载并解析完才继续，首屏延迟直接拉长 300ms 以上。这不是“慢一点”，是用户看到白屏的明确原因。
常见错误现象包括：页面长时间空白、DOMContentLoaded 延迟触发、LCP（最大内容绘制）指标暴跌。
- 绝对禁用
new XMLHttpRequest().open("GET", "lng/zh.json", false) - 不要在
中内联翻译逻辑，尤其避免同步 fetch - 语言包体积要控制：单个 JSON 文件建议 ≤15KB（gzip 后），超大文件即使异步也会拖慢
load事件
怎么用 defer + preload 加速关键语言资源
核心思路是让语言包和主逻辑并行加载，但不阻塞渲染，且确保它比 DOM 更新逻辑更早就绪。
推荐做法：
- 把语言检测和翻译初始化逻辑放在独立 JS 文件（如
translate.js）中，并用defer加载：<script defer src="js/translate.js"></script> - 对默认语言包（如用户是中文，预加载
lng/zh.json）加<link rel="preload" href="lng/zh.json" as="fetch" crossorigin>—— 注意必须带crossorigin，否则 fetch 会因 CORS 失败 - 避免对所有语言都 preload：只预加载最可能用到的 1–2 种（如
en和zh），其余按需fetch()
如何避免重复请求和缓存失效
用户切换语言时，如果每次都是 fetch("lng/en.json")，既浪费带宽又增加延迟；而盲目设 cache: "force-cache" 又会导致更新后用户看不到新文案。
务实方案：
- 用
localStorage缓存已加载的语言数据，键名如lng_zh_202607（含年月，便于版本控制） - 首次加载时用
fetch(url, { cache: "no-store" })确保取到最新版；后续读缓存，仅当缓存不存在或过期时才 fetch - 服务端为语言 JSON 设置强缓存头：
Cache-Control: public, max-age=31536000（1 年），但文件名带上哈希（如zh.abc123.json），这样更新时 URL 变，缓存自然失效
data-i18n 属性遍历性能怎么不拖慢渲染
页面有 200+ 个 data-i18n 元素时，逐个 querySelectorAll("[data-i18n]") + textContent 赋值，可能引发重排重绘，尤其在低端安卓 WebView 上明显卡顿。
优化点很实际：
- 只在
document.readyState === "interactive"或DOMContentLoaded后执行替换，避开解析阶段 - 用
document.createDocumentFragment()批量构建更新后的节点，最后一次性 append 到父容器，减少 layout thrashing - 对表单类动态元素（
input的placeholder、title），改用setAttribute("placeholder", t("xxx"))，而非操作input.placeholder（后者会强制同步样式计算）
真正容易被忽略的是语言包加载时机与 DOM 就绪时机的错位——不是“有没有翻译”，而是“什么时候开始翻译”决定了用户第一眼看到的是空白、占位符，还是真实文案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
