HTML进度条是纯视觉组件，不参与真实加载流程；其value必须由JS显式设置，需绑定fetch/ReadableStream或XMLHttpRequest.onprogress事件并结合content-length计算百分比，且完成态须以load事件为准而非进度值。
HTML 进度条本身不会影响页面加载状态，它只是个视觉组件，不参与资源加载逻辑或浏览器的 document.readyState、window.onload 或 fetch 等真实加载流程。
进度条显示时机错位：常见错误是把 progress 元素当成了加载信号源
很多开发者误以为在 HTML 里写个 <progress value="0" max="100"></progress> 就能“自动反映加载进度”，其实它完全静态。浏览器不会主动更新它的 value，也不会监听 XMLHttpRequest 或 fetch 的上传/下载进度。
- 真正触发加载的是 JS 发起的请求（如
fetch()、XMLHttpRequest.upload.onprogress），不是 HTML 标签本身 -
<progress></progress>必须由 JS 显式设置element.value = ...才会变化 - 若在 DOM 加载完成前就操作
<progress></progress>，可能报Cannot set property 'value' of null
用 fetch + ReadableStream 实现真实下载进度（现代方案）
想让进度条和实际资源加载同步，必须手动绑定事件并计算百分比。目前最可靠的方式是配合 Response.body.getReader() 和 content-length 响应头：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
fetch('/large-file.zip')
.then(res => {
const contentLength = res.headers.get('content-length');
const total = contentLength ? parseInt(contentLength) : 0;
const reader = res.body.getReader();
let loaded = 0;
<pre class="brush:php;toolbar:false;">return reader.read().then(function process({ done, value }) {
if (!done) {
loaded += value.length;
const progress = total ? Math.round((loaded / total) * 100) : 0;
document.querySelector('progress').value = progress;
return reader.read().then(process);
}
});});
- 注意：该方式依赖服务端返回
content-length，否则无法预估总大小 - Safari 对
ReadableStream支持较晚（iOS 16.4+ / macOS 13.3+），旧版本需降级为XMLHttpRequest - 不要在
fetch().then()外直接设progress.value = 100，因为响应体可能还没读完
XMLHttpRequest 的 onprogress 更兼容但更难控制粒度
如果目标是兼容 IE11 或需要上传进度（比如表单文件提交），XMLHttpRequest 仍是首选：
立即学习“前端免费学习笔记（深入）”；
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json');
xhr.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
document.querySelector('progress').value = Math.min(99, Math.floor(percent));
}
};
xhr.onload = function() {
document.querySelector('progress').value = 100;
};
xhr.send();
-
e.lengthComputable为false时说明服务端没发content-length，此时只能显示“加载中”而非具体百分比 - 务必限制最大值为 99（而非 100）直到
onload触发，避免进度条“跳变”或提前结束 - 移动端 WebView（如微信内置浏览器）对
onprogress触发频率不稳定，建议加防抖或最小更新间隔
最常被忽略的一点：进度条数值只是估算，不代表资源已解析或可交互。即使 progress.value === 100，DOM 可能还没构建完，document.querySelector 仍可能返回 null —— 判断加载完成，永远以事件为准，而不是进度条。
