如何通过HTML的document.readyState判断文档当前的加载解析状态-html教程-PHP中文网

document.readystate 的取值有 uninitialized、loading、interactive、complete、loaded 五种，现代标准稳定可用的仅 loading、interactive、complete；它用于在 dom 可交互但资源未全加载时介入，比 onload 和 domcontentloaded 更底层可控。

如何通过html的document.readystate判断文档当前的加载解析状态

document.readyState 的取值有哪些

它不是布尔值，也不是百分比，而是一个只读字符串，浏览器根据当前文档生命周期返回以下五个值之一：uninitialized（极少见，仅旧IE）、loading、interactive、complete，部分规范还提过 loaded（已基本弃用）。现代标准中，实际能稳定观测到的只有 loading、interactive、complete 三种。

什么时候该监听 readyState 而不是用 onload 或 DOMContentLoaded

当你需要在 interactive 阶段就介入（比如页面刚可交互但图片/脚本还在加载），或需兼容老环境（如 IE8–10）时，document.readyState 比事件更底层、更可控。但要注意：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

onload 等待所有资源（图片、iframe、CSS）加载完毕，DOMContentLoaded 只等 DOM 解析完成，而 readyState === 'interactive' 表示 DOM 已构建完、JS 可执行、用户可交互——但它不保证 CSS 已解析完毕，可能样式未生效
在 interactive 阶段操作 DOM 是安全的，但若依赖 getComputedStyle 或布局计算，仍可能拿到未应用样式的值
不要在 loading 阶段尝试访问 document.body，它大概率是 null

如何可靠监听 readyState 变化

直接轮询或一次性判断都容易漏掉状态，推荐用 readystatechange 事件 + 状态兜底：

document.addEventListener('readystatechange', () => {
  if (document.readyState === 'interactive') {
    console.log('DOM ready, user can interact');
  } else if (document.readyState === 'complete') {
    console.log('All resources loaded');
  }
});

// 兜底：防止事件没触发（如脚本动态插入后才监听）
if (document.readyState === 'complete') {
  // 立即执行
} else if (document.readyState === 'interactive') {
  // 立即执行（某些浏览器会跳过 interactive）
}

注意：readystatechange 在 complete 前一定会触发 interactive，但某些场景（如内联脚本紧贴