HTML5 progress 元素本身不支持分段或合并进度
浏览器原生 progress 只能表示一个连续的、线性的完成比例（0–1），没有内置 API 拆解“上传 3 个文件，已完成 2 个”这类复合状态。想靠 <progress value="66" max="100"></progress> 直接反映多任务合并进度，本质是错用——它显示的是数值，不是逻辑。
常见错误现象：progress 突然跳变、卡在 99% 不动、多个任务完成但进度条倒退。根源是把「任务完成数」粗暴映射成百分比，没处理权重、耗时差异和失败重试。
- 若 3 个任务大小悬殊（如 10MB、100KB、2MB），按数量平均分配权重（各占 33%）会导致视觉进度严重失真
- 某个任务失败后重试，
value若未回退或冻结，用户会误判整体进展 -
progress不触发重绘优化，高频更新（如每 50ms）反而引发卡顿，尤其在低端设备上
用 JavaScript 手动聚合多任务状态，再驱动 progress
真正可控的方式：维护一个独立的状态对象，每个任务带 id、loaded、total、status（pending/running/done/failed），由你决定何时、如何汇总到全局进度。
使用场景：文件批量上传、并行 API 请求、分片下载。关键不是“怎么画进度条”，而是“怎么定义 100%”。
立即学习“前端免费学习笔记（深入）”；
- 推荐按字节加权：全局
total= 所有任务total之和；全局loaded= 所有任务当前loaded之和；progress.value = Math.min(100, Math.round((loaded / total) * 100)) - 若任务不可预估大小（如某些 API 返回无
Content-Length），改用「完成数 + 权重系数」：给每个任务配weight: 1.0，失败任务设为weight: 0，动态归一化 - 避免直接绑定
onprogress到 DOM：用requestIdleCallback或节流（如throttle(16)）更新progress.value，防止渲染阻塞
不要忽略 aria-valuenow 和语义可访问性
仅靠视觉进度条对屏幕阅读器无效。若不手动同步 ARIA 属性，视障用户完全不知道当前进度是 42% 还是已失败。
容易踩的坑：只写 aria-valuenow 却漏掉 aria-valuemin 和 aria-valuemax，导致读屏软件无法解析范围；或在任务失败后忘记更新 aria-valuetext（如改为 “第 2 项上传失败，正在重试”）。
- 每次更新
progress.value时，必须同步设置：progress.setAttribute('aria-valuenow', current)、progress.setAttribute('aria-valuetext', `${current}% 完成`) - 若某任务永久失败且不再重试，应冻结进度并明确提示：“共 5 项，4 项完成，1 项失败”，此时
aria-valuetext比数字更重要 - 不要依赖 CSS 伪元素生成提示文字——它们不会被读屏软件捕获
用 Promise.allSettled 替代 Promise.all 处理并行任务终止逻辑
多任务中个别失败不应中断整体进度统计。Promise.all 遇到第一个 reject 就抛错，你甚至收不到其余任务的进度；而 Promise.allSettled 保证返回所有结果，才可能做真实聚合。
性能影响：allSettled 不会显著变慢，但它要求你主动遍历 results 数组判断每个 status，不能偷懒用 then/catch 分支。
- 示例片段：
Promise.allSettled(tasks).then(results => { results.forEach((r, i) => { if (r.status === 'fulfilled') { taskStates[i].status = 'done'; taskStates[i].loaded = taskStates[i].total; } else { taskStates[i].status = 'failed'; } }); updateGlobalProgress(); // 此处重新计算并驱动 <progress> }); - 注意：
allSettled是 ES2020 特性，IE 完全不支持；若需兼容，可用Promise.all(tasks.map(t => t.catch(e => e)))模拟，但要小心错误类型区分 - 别在
allSettled回调里直接操作 DOM 节点，先更新状态，再统一触发渲染，避免重复 layout
进度条是否“准确”，取决于你怎么定义完成。多数人卡在第一步：把「任务列表」和「进度数值」当成两个独立模块去写，而不是用同一套状态驱动两者。只要状态对象里存着每个任务的真实 loaded/total/status，并且更新逻辑不绕过这个中心，剩下的只是让 progress 忠实反映它。
