HTML5原生不提供页面加载进度条，progress标签需手动控制value和max；可用document.readyState+setTimeout粗略模拟，或PerformanceObserver监听资源加载，但均属估算而非精确反映。
HTML5 原生不提供页面加载进度条
直接说结论：<progress></progress> 标签本身不监听页面资源加载，它只是个空壳控件，需要你手动控制 value 和 max。浏览器不会自动把 HTML 解析、JS 加载、图片下载这些过程映射到它上面。
所以“页面加载进度条”本质是「模拟」或「估算」，不是真实反映 DOMContentLoaded 或 load 事件的精确百分比。
用 document.readyState + setTimeout 做粗略模拟
适合对精度要求不高、想快速上线一个视觉反馈的场景。原理是：在 DOMContentLoaded 触发前，按时间推移逐步增加 <progress></progress> 的 value，等真正加载完成时跳到 100%。
-
document.readyState === 'loading'时启动计时器，每 50ms 增加 1~2 - 遇到
document.readyState === 'interactive'（DOM 解析完）立即设为 80% 左右 - 监听
window.addEventListener('load', ...)，此时设value = 100 - 注意避免重复触发：计时器要在
load后clearTimeout或clearInterval
示例片段：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<progress id="pg" value="0" max="100"></progress>
<script>
const pg = document.getElementById('pg');
let timer = null;
function updateProgress(val) {
pg.value = Math.min(99, val);
}
if (document.readyState === 'loading') {
timer = setInterval(() => updateProgress(pg.value + 1.5), 50);
}
document.addEventListener('DOMContentLoaded', () => {
clearInterval(timer);
pg.value = 80;
});
window.addEventListener('load', () => {
clearInterval(timer);
pg.value = 100;
});
</script>
用 PerformanceObserver 监听资源加载更靠谱
如果你真想反映资源加载状态（比如 JS、CSS、图片），得靠 PerformanceObserver 订阅 'resource' 类型事件。但它不能告诉你“还剩几个没加载完”，只能告诉你“又完成了一个”。所以你需要预先统计关键资源数量。
- 先用
document.querySelectorAll('script, link[rel="stylesheet"], img')数出待加载资源数（注意排除data-src懒加载图） - 用
PerformanceObserver监听resource，每次回调检查entry.initiatorType是否匹配目标类型 - 每完成一个，就递增计数器并更新
<progress></progress>；全部完成再补上最后 5~10% 给其他开销（如渲染、JS 执行） - 兼容性注意：
PerformanceObserver在 IE 完全不可用，Safari 11+、Chrome 59+ 支持
第三方库如 nprogress 为什么更常用
因为手写容易漏掉边界情况：比如异步 JS 动态插入的 script、fetch 请求、字体加载、Web Worker 初始化……这些都不会触发 load 事件，但用户感知上仍是“页面还没准备好”。
-
nprogress默认在pushState、ajaxStart等钩子自动增减进度，也支持手动NProgress.start()/NProgress.done() - 它用的是
opacity+transform实现顶部细条，不依赖<progress></progress>，样式更可控 - 但要注意：它不解决“真实加载耗时”问题，只是交互节奏管理——这点和原生
<progress></progress>一样，只是封装得更稳
真正难的不是画一条进度条，而是定义“加载完成”的语义：是 DOM 就绪？首屏渲染？还是某个核心 API 返回成功？这个判断点一旦错位，进度条就会卡在 99% 或闪退——比没进度条还误导人。
