javascript动态加载语言包应提前fetch并缓存，用textcontent替换文本节点，避免innerhtml重写；优先读取navigator.language，内联fallback文本防fouc；禁用iframe多语言，改用spa路由或ssr；配合css自定义属性与逻辑属性支持多语言样式及rtl。
用 JavaScript 动态加载语言包，但别在 DOMContentLoaded 里硬等
直接在页面加载完成时用 fetch() 拉整个语言包 JSON，再遍历 DOM 替换文本，看似简单，实则容易阻塞渲染或触发 FOUC（闪白）。关键不是“能不能做”，而是“什么时候做、做多少”。
- 优先读取
navigator.language或document.documentElement.lang，不依赖服务端 cookie 或 localStorage 初始值，避免多一次异步判断 - 语言包请求用
fetch(lang + '.json', { credentials: 'same-origin' })，加credentials防止跨域下静默失败 - 不要等所有 DOM 渲染完才开始加载语言包——可在
里提前fetch，拿到后缓存到window.__i18nData，后续按需注入 - 首次渲染时，先用内联的最小化 fallback 文本（如
<p data-i18n="welcome">Welcome</p>），再异步覆盖，避免空白期
避免用 innerHTML 批量重写整个区域
常见错误是把一段含 HTML 结构的翻译文本（比如带 <strong></strong> 的欢迎语）直接塞进 innerHTML，这会强制浏览器重建子树，还可能意外执行脚本或丢失已有事件监听器。
- 只替换文本节点：用
textContent替代innerHTML，除非明确需要保留富文本结构 - 若必须支持 HTML 片段，对语言包中每个 key 做白名单校验，过滤掉
<script></script>、onerror=等危险模式 - 对含插值的文案（如
"Hello {name}"），用document.createTextNode()+document.createElement()组装，而不是拼接字符串再设innerHTML - 批量更新时，用
DocumentFragment缓存变更，最后一次性 append，减少重排重绘
iframe 嵌入多语言页面？性能和 SEO 都会掉档
有人想用 <iframe src="page_zh.html"></iframe> 实现语言切换，这会让页面变成两个独立上下文：资源重复加载、无法共享状态、搜索引擎几乎不索引 iframe 内容，且 lang 属性对 iframe 里的文档无效。
-
<iframe></iframe>本质是隔离环境，适合嵌入第三方内容（如地图、支付页），不适合承载主站多语言逻辑 - 如果非要用 iframe 加载不同语言页，至少加上
loading="lazy"和sandbox="allow-scripts"，并确保父页不被忽略 - 更合理的方式是单页应用（SPA）路由级切换：URL 变为
/zh/about，由前端 JS 控制语言状态，复用同一套 DOM 结构 - 服务端渲染（SSR）场景下，应在响应前就根据请求头中的
Accept-Language渲染对应语言的 HTML，而非返回通用模板再靠 JS 补全
语言切换后，CSS 和字体加载容易被忽略
中英文混排时，font-family 往往要切换；阿拉伯语需要 RTL 布局；某些语言字符宽度差异大，可能导致按钮文字溢出。这些不是纯 JS 能解决的。
- 用 CSS 自定义属性控制语言相关样式：
:root[lang="zh"] { --text-scale: 1.1; }，配合 JS 切换document.documentElement.lang和 class - 动态加载字体：中文用
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC');，英文用Noto+Sans，但别在语言切换时重新@import，应预加载两套 - RTL 支持不能只靠
dir="rtl"，还要检查margin-left/right、text-align是否适配，建议用逻辑属性（margin-inline-start）替代物理属性 - 切换语言后，调用
window.dispatchEvent(new Event('languagechange'))，让其他模块（如日期格式化、数字分隔符）同步响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
