如何通过HTML的document.readyState判断文档当前的加载解析状态
2026-05-24 18:48:24
0浏览
收藏
你在学习文章相关的知识吗？本文《如何通过HTML的document.readyState判断文档当前的加载解析状态》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！
document.readyState 的取值有 uninitialized、loading、interactive、complete、loaded 五种，现代标准稳定可用的仅 loading、interactive、complete；它用于在 DOM 可交互但资源未全加载时介入，比 onload 和 DOMContentLoaded 更底层可控。
document.readyState 的取值有哪些
它不是布尔值，也不是百分比，而是一个只读字符串，浏览器根据当前文档生命周期返回以下五个值之一：uninitialized（极少见，仅旧IE）、loading、interactive、complete，部分规范还提过 loaded（已基本弃用）。现代标准中，实际能稳定观测到的只有 loading、interactive、complete 三种。
什么时候该监听 readyState 而不是用 onload 或 DOMContentLoaded
当你需要在 interactive 阶段就介入（比如页面刚可交互但图片/脚本还在加载），或需兼容老环境（如 IE8–10）时，document.readyState 比事件更底层、更可控。但要注意：
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，但某些场景（如内联脚本紧贴
excel如何实现多条件匹配查找_index与match多条件查找技巧 
