document.readyState不能当解析进度用,因其仅为三态离散状态机(loading/interactive/complete),无中间值,不反映解析耗时、字节比例或DOM节点完成率,且与资源加载解耦;parsing事件非标准、兼容性差、无进度数值,不可用于生产环境进度条。

HTML 解析进度无法被动态监控——document.readyState 不是进度条,它只有三个离散状态,且不反映解析耗时或字节加载比例。
为什么 document.readyState 不能当解析进度用
document.readyState 是一个只读状态机,不是连续计数器。它只在关键节点切换:"loading" → "interactive" → "complete",中间没有过渡值,也无法告诉你“已经解析了 63% 的 DOM 节点”或“还剩多少 script 标签没执行”。更关键的是,它和资源下载无关:一张 10MB 的图片还在加载,readyState 可能早已变成 "complete";而一个含大量内联 script 的小 HTML,也可能卡在 "interactive" 很久。
真正能反映“解析中”的信号只有 parsing event(仅 Chrome/Edge 支持)
Chrome 119+ 和 Edge 119+ 引入了实验性事件 document.addEventListener('parsing', handler),但它不是标准 API,Firefox/Safari 完全不支持,且触发频率极低(通常只在 parser 切换阶段时发一次),无法用于做平滑进度条。
- 它不提供任何进度数值,
event对象里只有type和timestamp - 它不区分 HTML 解析、CSSOM 构建、JS 执行等子阶段
- 启用需手动开启 flag:
chrome://flags/#enable-parsing-event,生产环境不可依赖
如果真要估算“解析进行到哪了”,只能靠间接手段
没有浏览器原生接口,但你可以结合几个可测指标做粗略推断,适用于内部诊断或调试面板,**不能用于用户可见的进度条**:
立即学习“前端免费学习笔记(深入)”;
- 监听
document.addEventListener('DOMContentLoaded', ...)和window.addEventListener('load', ...)的时间差,差值大说明资源加载拖慢了整体感知 - 用
performance.getEntriesByType('navigation')[0].domComplete - performance.getEntriesByType('navigation')[0].domInteractive算出 DOM 解析+执行 JS 的耗时,但这是终值,不是过程值 - 在
<head>底部插入一个<script>console.time('parse-start')</script>,再在<body>开头插<script>console.timeEnd('parse-start')</script>,可捕获主 HTML 字符串解析耗时,但无法覆盖异步脚本或动态插入内容
真正需要进度反馈的场景(比如大型 SPA 首屏加载、远程模板流式渲染),应该由应用层控制:把 HTML 拆成 chunk 分批 fetch + DOMParser 增量解析,自己维护 parsedBytes / totalBytes;或者改用服务端流式响应(text/html; charset=utf-8 + Transfer-Encoding: chunked),前端监听 response.body.getReader() 的 read() 回调来算进度——这些都不是浏览器在“监控解析”,而是你在绕过解析引擎,自己做可控分段。



















