不能。原生<progress>标签不自动感知加载过程，value需手动用JavaScript更新；必须绑定XMLHttpRequest.upload.onprogress或fetch+ReadableStream逻辑，且需校验lengthComputable、同步ARIA属性、处理边界值与兼容性问题。
原生 <progress> 标签不会自动反映文件加载进度，必须手动绑定 XMLHttpRequest.upload.onprogress 或 fetch 流式读取逻辑，否则你看到的只是个静止的灰条或不确定动画。
为什么写了 <progress value="30" max="100"></progress> 却没动
浏览器不监听任何网络、解析或渲染过程，value 是纯静态属性。常见失效原因：
-
value或max是字符串（如value="30"），部分浏览器（尤其是 Firefox）会静默忽略，应统一用el.value = 30赋值 - 只设
max="100"没设value→ 进入不确定态（indeterminate），显示为循环动画条，不是百分比 -
value超出max（如value="120" max="100"）→ 值被截断或丢弃，UI 停在 0% 或满格 - IE11 及更早版本完全不支持
<progress>，标签直接消失，需降级方案
用 XMLHttpRequest 绑定上传进度时怎么防错
这是最稳定、兼容性最好的文件上传进度捕获方式，但容易漏掉关键校验：
- 必须检查
event.lengthComputable === true，否则event.total可能为 0，导致除零错误或 NaN - 别直接用
event.loaded / event.total * 100，要先Math.round()再赋值，避免小数高频抖动 - 更新前加阈值判断：
if (Math.abs(newVal - bar.value) >= 1) bar.value = newVal，防止低端设备重绘过载 - 请求中断或失败时，记得手动重置
bar.value = 0，否则残留上次状态
fetch + ReadableStream 模拟下载进度的坑点
fetch 本身不提供原生进度事件，需靠流式读取分块计算，但实际落地易翻车：
立即学习“前端免费学习笔记（深入）”；
- 服务端必须返回
Content-Length头，否则无法预估 total；若用Transfer-Encoding: chunked，只能靠累计已读字节数粗略估算 - 不要在
reader.read()的每个then回调里直接更新bar.value，应聚合 chunk 后再算百分比，否则频繁触发 UI 更新 - 流读取完成（
done === true）后，bar.value可能卡在 99%，需补一句bar.value = 100并加requestAnimationFrame确保渲染 - 别依赖
performance.getEntriesByType('resource')补全进度——它不包含流式响应体，且存在采集延迟
同步更新 aria-valuenow 为什么不能省
原生 <progress> 初始渲染时会自动映射 value/max 到对应 ARIA 属性，但 JS 动态修改 value 后，部分读屏器（如旧版 NVDA）不会自动感知变化：
- 必须手动同步：
bar.setAttribute('aria-valuenow', bar.value) - 如果
max不是 100（比如设为max="24"），还要同步aria-valuemax -
aria-valuetext不能只写“65%”，应带上下文，如"图片上传进度：65%"，失败时可改为"第 2 项失败，已完成 1/3"
真正难的不是让进度条动起来，而是定义清楚“100%”在你业务里到底意味着什么——是资源全部 fetch 完？还是 DOM 渲染完毕？或是字体、布局、JS 执行全部就绪？这些阶段无法被 ProgressEvent 或 PerformanceObserver 精确覆盖，硬填会导致进度卡住或跳变。
