lang属性必须显式设置在每个语义化容器上，因浏览器和屏幕阅读器依据元素自身lang判定语言行为而非继承；仅改document.documentelement.lang会导致title、alt等仍读旧语言，标点间距错乱，字体回退失效。
lang属性必须显式设置在每个语义化容器上，不能只靠html lang="zh-CN">继承
浏览器和屏幕阅读器实际按元素自身的lang属性判定语言行为，不是靠继承。只改document.documentElement.lang会导致：title、alt、placeholder等属性仍被读作旧语言；标点间距（如中文顿号与英文逗号）错乱；字体回退链失效（比如lang="en"的<pre class="brush:php;toolbar:false;"></pre>本该用等宽英文字体，但没设lang就可能套用中文字体）。
实操建议：
- 所有带文本内容的语义化容器（
<h1></h1>、<p></p>、<section></section>、@#@#@#@#@#@#@#@#@#@0”）必须用<code>innerHTML替换，语言包里对应值得是可信纯HTML片段，否则有XSS风险 - 动态插入的DOM（弹窗、AJAX表格行）插入后必须立即调用翻译函数，不会自动监听
语言包加载必须用fetch+try/catch，不能硬编码或内联JSON
把语言包直接写进JS里，会导致构建产物体积膨胀、无法按需加载、热更新困难；用XMLHttpRequest老式写法又容易忽略HTTP状态码和MIME类型校验，遇到404或服务器返回text/plain MIME时静默失败。
实操建议：
- 语言包路径统一为
./locales/${lang}.json，例如./locales/zh-HK.json、./locales/en-US.json - 加载必须用
fetch()，外层包try/catch，内部检查response.ok和response.headers.get('content-type')?.includes('application/json') - fallback顺序：先试完整BCP 47码（
zh-HK），再截主语言（zh），最后退到默认语言（en）；某语言暂未翻译的键，语言包里也要保留字段并设为空字符串，否则查不到就留白
国际化切换必须同步更新滚动位置与焦点状态，否则影响可访问性
单纯替换文本+改lang，页面会重排、焦点丢失、滚动条跳回顶部，键盘用户和屏幕阅读器用户会中断操作流。这不是UI闪动问题，而是辅助技术上下文断裂。
实操建议：
- 切换前用
getComputedStyle(document.scrollingElement || document.documentElement).scrollTop记录滚动位置 - 更新DOM后，用
requestAnimationFrame延迟恢复滚动，避免布局抖动 - 若原焦点在可翻译元素上（如
<button data-i18n="btn_cancel"></button>），翻译完成后需手动.focus()回该元素 - 不要用
location.reload()实现语言切换——这会清空表单草稿、销毁状态，违背离线优先原则
lang属性、每个data-i18n后缀、每次fetch响应、每处滚动恢复都保持语义精确与时机可靠。工程越大型，越容易在细节上漏掉一两个title或aria-label，而这些恰恰是残障用户最先感知到的断裂点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
