应读取 document.documentElement.dir 判断页面文字方向，返回 "ltr"、"rtl" 或空字符串；为空时需根据 document.documentElement.lang 前缀（如 "ar"、"he"）fallback 判断，且须在 DOM ready 后执行。
如何用 document.documentElement.dir 判断当前页面文字方向
页面是 LTR 还是 RTL，不能靠 lang 属性猜，也不能硬编码。真实场景中，dir 属性可能出现在 、 或某个容器上，但最可靠的是读取 document.documentElement.dir —— 它反映根元素的最终解析方向，受浏览器继承规则约束，且在 DOM ready 后即稳定。
常见错误：在 DOMContentLoaded 之前读取，或只检查 document.body.dir（body 可能没设，会返回空字符串）。
-
document.documentElement.dir返回"ltr"、"rtl"或空字符串（此时应 fallback 到document.documentElement.lang的前缀判断，如"ar"、"he"、"fa"） - 不要依赖 CSS
:dir(ltr)伪类做 JS 判断——它不暴露给 JS，且兼容性差（Chrome 115+ / Firefox 119+ 才稳定） - 服务端渲染（SSR）时，JS 尚未执行，这个判断只能用于客户端动态加载阶段
动态插入 <link rel="stylesheet"> 时如何避免 FOUC 和竞态
直接 document.write 或同步 fetch + innerHTML 注入 style 标签，会导致样式闪动（FOUC）或阻塞渲染。正确做法是创建 <link> 元素并手动挂载，同时监听 onload 和 onerror。
关键点在于：路径必须明确区分 LTR/RTL 版本，且不能拼错后缀，否则 404 后不会自动 fallback。
立即学习“前端免费学习笔记（深入）”；
- 文件命名建议统一为
style.ltr.css和style.rtl.css，避免用ar.css或he.css—— 方向 ≠ 语言，阿拉伯语页面也可能强制 LTR（如代码文档） - 插入前先清空已有方向相关样式表：
document.querySelectorAll('link[data-direction]').forEach(el => el.remove()) - 务必设置
link.rel = 'stylesheet'和link.media = 'all'，否则部分浏览器（如 Safari）可能延迟加载
为什么不能用 @import 在 CSS 里做方向分支
@import 是阻塞的、无法条件化、且不支持 JS 动态控制。更严重的是：它在 CSS 解析阶段就触发网络请求，而此时 document.documentElement.dir 还不可读（CSS 加载早于 DOM 构建完成）。
实际踩坑现象：页面首次加载时用了 LTR 样式，用户切换语言后，@import 不会重触发，RTL 规则永远不生效。
- CSS 中的
@dir（草案）和@media (direction: rtl)均未被任何主流浏览器实现，纯属无效尝试 - 想复用同一份 CSS？用 CSS 自定义属性 +
[dir="rtl"]选择器更稳妥，但注意性能：嵌套过深的[dir="rtl"] .foo .bar会影响重排重绘效率 - 若必须分离文件，就老老实实 JS 控制加载，别绕回 CSS 层
IE11 兼容时 document.documentElement.dir 的边界情况
IE11 虽已淘汰，但仍有内网系统需支持。它对 dir 的继承逻辑和现代浏览器不一致：若 ，IE11 不会根据 lang 推断方向，而是始终返回空字符串。
这意味着你不能只依赖 dir，得加一层语言码映射兜底。
- 维护一个最小 RTL 语言码白名单：
['ar', 'he', 'fa', 'ur', 'ps', 'sd', 'ks', 'ug']，取document.documentElement.lang.split('-')[0].toLowerCase()匹配 - IE11 下
link.onload不触发，改用轮询link.sheet?.cssRules或降级为setTimeout等待 200ms - 避免使用
Promise.allSettled或可选链（?.），IE11 全不支持
