HTML国际化性能瓶颈在于语言包加载策略、DOM更新方式和lang属性同步逻辑。需设fetch超时与localStorage fallback，DOM就绪后批量处理节点，用DocumentFragment减少重排，正确同步所有lang属性并校验BCP 47格式。
HTML应用国际化本身不带来直接性能开销，真正影响加载与渲染速度的是语言包加载策略、DOM更新方式和lang属性同步逻辑。
语言包加载失败或超时会阻塞首屏渲染
如果用 fetch() 同步加载语言包且没设 timeout 或 fallback，页面可能白屏数秒；尤其在弱网下，fetch('./locales/zh-CN.json') 卡住时，所有 data-i18n 元素都留空或显示键名。
- 必须用
Promise.race([fetch(...), new Promise(r => setTimeout(r, 3000))])设硬性超时 - fallback 不该只退到内置对象，而应先尝试 localStorage 缓存的上一次成功加载内容
- 避免在
DOMContentLoaded前就发起 fetch —— 等 DOM 就绪再查document.querySelectorAll('[data-i18n]')，否则查不到节点
批量更新 DOM 时触发过多重排重绘
逐个调用 el.textContent = langPack[key] 会反复触发 layout，尤其当页面含上百个 data-i18n 节点时，滚动卡顿明显。
- 改用
document.createDocumentFragment()批量构建后一次性挂载（仅适用于静态文本替换） - 对 input/textarea 的
placeholder更新，优先用el.setAttribute('placeholder', ...)而非直接赋值，减少属性变更监听开销 - 跳过已隐藏元素（
getComputedStyle(el).display === 'none'），避免无意义操作
lang 属性未同步更新导致辅助技术失效但无报错
只改 document.documentElement.lang 而忽略子元素的 lang，屏幕阅读器仍按旧语言朗读，字体 fallback 和标点间距也错——这不会抛错，却让国际化“形同虚设”。
立即学习“前端免费学习笔记（深入）”；
- 切换语言时必须遍历所有带
lang属性的元素：document.querySelectorAll('[lang]')，并按需保留或更新其值 - 明确需要保留原语言的节点（如
<code lang="bash">npm install）要加data-i18n-ignore-lang标记，避免误刷 - BCP 47 格式校验不能省：
zh-CN有效，zh_CN或chinese会导致 Safari 忽略该属性
最容易被忽略的点是：lang 属性的变更本身不触发重排，但它是浏览器决定字体回退、断行规则、标点压缩和语音引擎行为的唯一依据——这些影响全在后台静默发生，既不报错也不打日志，只有用户反馈“朗读怪”或“中文混英文时字距异常”才暴露问题。
