lang属性必须设对，否则i18n失效根源在于它是浏览器、屏幕阅读器和搜索引擎识别语言的唯一依据；错误写法如<html lang="zh">或缺失，正确须用BCP 47标准如zh-CN、en-US、zh-TW，地区码不可省，且需服务端动态注入、配合HTTP缓存与预加载优化。
lang属性必须设对，否则i18n失效根源在这里
很多页面加了语言包却没生效，根本原因常出在lang属性上。它不是可选装饰，而是浏览器、屏幕阅读器和搜索引擎识别语言的唯一依据。
错误写法：<html lang="zh"> 或 <html>（完全缺失）；正确写法必须是BCP 47标准格式，比如中文用zh-CN，英文用en-US，繁体中文用zh-TW。地区码不能省——部分辅助技术（如NVDA）依赖它切换语音引擎，SEO也据此判断内容归属。
工程建议：
- 构建时通过环境变量注入，避免硬编码；
- 服务端渲染场景下，从请求头
Accept-Language解析后动态写入，而非仅依赖客户端navigator.language； - 用
document.documentElement.lang检查运行时值，别只信HTML源码。
语言包加载别用fetch反复拉，缓存和预加载得配齐
每次切语言都fetch('/lang/zh.json')，不仅慢，还可能触发重复请求或竞态问题。真实项目里，语言包应视为静态资源，走HTTP缓存+CDN分发。
立即学习“前端免费学习笔记（深入）”；
关键动作：
- 给语言包响应头加上
Cache-Control: public, max-age=31536000（一年），配合内容哈希命名（如zh.abc123.json），确保更新后能立即生效； - 首屏语言确定后，用
<link rel="preload" as="fetch" href="/lang/en.json">提前发起请求，避免切换时白屏； - 避免在
DOMContentLoaded后才加载语言包——应放在<head>里，或至少在document.write前完成初始化。
i18next初始化卡顿？删掉默认fallbackLng和debug配置
开发阶段开debug: true和fallbackLng: 'en'很爽，但上线后这两项会拖慢首次渲染：前者打大量日志，后者触发多余语言回退检测逻辑。
性能敏感场景要精简：
- 生产环境关闭
debug，用silent: true彻底禁用控制台输出； -
fallbackLng设为false或明确指定单语言数组（如['zh-CN']），避免遍历多级回退链； - 禁用
initImmediate: false（默认true），让初始化同步执行，减少异步调度开销； - 如果只支持有限几种语言，直接传
supportedLngs: ['zh-CN', 'en-US']，跳过运行时探测。
HTML内联文本替换比JS模板快，但得防DOM重排
用data-i18n标记+innerHTML批量替换，比React/Vue组件级重渲染轻量得多，适合静态页或CSR轻量应用。但它有个隐藏代价：频繁操作textContent或innerHTML会触发浏览器重排（reflow）。
实操要点：
- 把所有待翻译节点收集到
DocumentFragment里统一操作，再一次性挂载，避免逐个el.textContent = ...； - 避开
table、form等重排代价高的标签内部做文本替换； - 对含HTML结构的翻译项（如
"欢迎<a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">登录</a>"），优先用insertAdjacentHTML而非innerHTML，减少父节点解析开销； - 切换语言时，用
getComputedStyle(el).display === 'none'跳过隐藏元素，别盲目遍历整个DOM树。
最易被忽略的是复数规则和日期格式——它们不靠语言包键值映射解决，必须调用Intl.PluralRules和Intl.DateTimeFormat。硬编码“1条消息”“2条消息”这种写法，在阿拉伯语或俄语里会直接翻车。
