多语言切换卡顿主因是重排与重复渲染，应批量更新DOM、用CSS类适配布局、缓存翻译结果、隔离组件级语言状态。
多语言切换时的卡顿，往往不是翻译本身慢，而是切换过程触发了大量重排、重复渲染或状态混乱。核心优化方向是：避免 DOM 逐个更新、减少布局抖动、复用已有结构、隔离语言变更影响范围。
批量更新文本节点，避开逐个 innerHTML 赋值
直接遍历所有带 i18n 属性的元素并改 innerHTML，会导致每个元素更新都可能触发重绘；若涉及尺寸变化（如中英文宽度差异），还容易引发重排。
推荐做法：
- 收集所有待更新的 DOM 节点（如 [data-i18n]），统一读取当前语言包对应文案
- 用 DocumentFragment 构建完整更新内容，或使用 textContent 批量替换（比 innerHTML 更轻量、无解析开销）
- 一次性应用到文档，例如：
document.getElementById('app').appendChild(fragment)
用 CSS 类控制布局适配，不靠 JS 重算尺寸
中英文切换常伴随文字长度剧变（如“设置”→“Settings”），若 JS 在切换后立刻读取 offsetWidth 或调整容器高度，极易触发强制同步布局。
立即学习“Java免费学习笔记（深入）”；
更稳妥的方式：
- 为不同语言预设 CSS 类（如 .lang-zh / .lang-en），在 body 上切换类名
- 用 CSS 的 min-width、flex-wrap、text-overflow 等声明式规则处理溢出和换行
- 避免在语言切换回调里调用 getBoundingClientRect() 或 offsetHeight
缓存翻译结果，跳过重复查找与格式化
频繁切换语言时，若每次都在深层嵌套对象中递归查找 key（如 messages[lang].user.profile.name），或反复执行日期/数字格式化，会堆积 CPU 开销。
可落地的优化：
- 对常用 key 做记忆化缓存（Map 存 key+lang 组合 → 文案）
- 将语言包按模块拆分，只加载当前页面所需部分（配合路由懒加载）
- 格式化函数（如 Intl.DateTimeFormat）实例复用，不要每次 new
组件级语言状态隔离，避免全量重渲染
在 React/Vue 等框架中，全局语言变更若导致根组件重渲染，整个子树都会被 diff，尤其含大量列表或表格时非常低效。
应做到：
- 语言状态下沉——只让真正依赖文案的组件订阅语言变更（如用 useTranslation 或 computed 按需响应）
- 静态文案区域（如页脚版权、固定按钮）用纯 CSS 类或属性控制，不参与响应式更新
- 对长列表等重型组件，启用 shouldComponentUpdate 或 memo，确保语言切换不触发无关子项重绘
