最轻量可行路径是data-i18n标记+JSON语言包+同步更新document.documentElement.lang；需显式标记所有文本节点及placeholder/title/alt等属性，语言包扁平结构、BCP 47命名，切换时同步更新lang属性、localStorage及动态节点。
直接用 data-i18n 标记 + location.hash 路由 + JSON 语言包，是当前最轻量、可调试、不依赖框架的可行路径。硬编码文案、只改 <html lang>、或靠 CSS 类显隐双语 DOM，都会在 SEO、可访问性、动态内容和 fallback 场景中出问题。
怎么给 HTML 元素打 data-i18n 标记才不会漏关键属性
所有要翻译的文本节点（<h1>、<p>、<button>、<label>）必须显式加 data-i18n 属性，值为英文小写+下划线键名，比如 "nav_home"；但仅设这个不够：
-
placeholder、title、alt这类属性不会被textContent覆盖，得额外加对应后缀：如data-i18n-placeholder="search_hint" -
value一般不翻译（表单输入值属于用户数据），跳过处理；但<label>的文字必须标记 - 含 HTML 结构的文案（如“请阅读使用条款”）需用
innerHTML替换，且语言包里对应值必须是可信纯 HTML 片段，否则有 XSS 风险 - 动态插入的 DOM（弹窗、AJAX 表格行）插入后必须立即调用翻译函数，否则不会自动生效
- 别在
<script>、<style>、<pre>内部加data-i18n——这些节点不参与渲染，JS 替换无效
语言包怎么组织和加载才不容易翻车
每个语言一个独立文件，路径统一为 ./locales/${lang}.json，例如 ./locales/zh.json、./locales/en.json。结构必须扁平、键名严格一致：
- 所有文件字段完全对齐，某语言暂未翻译也要保留键，设为空字符串：
"btn_submit": ""，否则查不到 key 就留白 - 加载时用
fetch()，别硬编码对象到 JS 里；加try/catch包裹fetch和response.json() - fallback 顺序必须是：先试完整码（如
zh-HK），再截主语言（zh），最后退到默认语言（如en） - 服务器返回 JSON 时，
Content-Type必须是application/json，否则fetch可能静默失败
为什么切换语言后页面会闪动或读错语音
只替换文本、只改 document.documentElement.lang，屏幕阅读器仍按旧语言朗读，字体回退和标点间距也会错——因为浏览器和辅助技术按**每个元素自身的 lang 属性**决定行为，不是继承来的。
立即学习“前端免费学习笔记（深入）”；
- 切换前必须遍历所有已带
lang属性的元素（如<p lang="en">、<pre lang="bash">），把它们的lang值也同步更新（除非明确要保留原语言） - 更新 DOM 前，用
getComputedStyle记录滚动位置；更新完再恢复，否则页面会跳回顶部 -
<title>、<meta name="description">等文档级元信息完全不继承<html>的lang，必须单独更新 - 动态格式化字段（如日期、数字）需重建
Intl.DateTimeFormat实例，不能复用旧对象
如何让 location.hash 路由与多语言状态严格同步
location.hash 是最轻量、零依赖的单页切换入口，但 URL 状态和视图状态必须严格同步。比如用户从 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdetail?id=123 切到 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15blist 后又点浏览器后退，你得能还原出那个 id=123 并重新拉取数据。
- hash 解析逻辑不能只写在初始化里，而要封装成可复用函数，且每次
hashchange都要走一遍 - 首次加载时
hashchange不会自动触发，需主动调用一次 handler 或检查location.hash - 切换视图前先清空所有
.active，再给目标元素加，防止多个视图同时显示 - 如果视图内容较多，可延迟加载（比如首次访问才
innerHTML = template），减少首屏体积 - 注意 IE8+ 支持，但 IE7 及更早版本不支持 —— 如果要兼容，得 fallback 到定时轮询
location.hash
真正容易被忽略的是：语言切换和路由变化都必须驱动同一套状态同步机制。比如 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15babout?lang=ja 这种组合参数，解析时既要提取 about，也要提取 lang，且两者变更都要触发视图重绘和 lang 属性更新——漏掉任意一环，就会出现文字对了但标点错位、或语音读错了但页面没刷新的情况。
