优化脚本加载，提升页面性能

本文深入解析了 `document.readyState` 这一被低估但至关重要的浏览器加载状态标识，重点揭示其三种状态（`loading`、`interactive`、`complete`）在真实渲染流程中的精确语义与实践价值——尤其强调 `interactive` 阶段作为“DOM 就绪、body 可用、资源未阻塞”的黄金时机，比 `DOMContentLoaded` 更可靠、比 `window.onload` 更及时，是白屏优化和安全初始化的核心锚点；文章不仅剖析了传统事件的缺陷与边界场景（如 SSR hydration 失败、iframe 异常、构建工具注入问题），更提供了带超时兜底、防重复触发、强健性校验的实战方案，并厘清了其与 `defer`/`async` 脚本的协同逻辑，助你精准掌控 JS 执行节奏，在毫秒级差异中赢得首屏体验优势。

document.readyState 有哪些可能值，分别代表什么阶段

document.readyState 是浏览器同步暴露的文档加载状态标识，共三种取值：loading、interactive、complete。它们不是时间戳，而是 DOM 构建过程中的关键里程碑：

• loading：HTML 文档正在解析中，