progress标签不会自动更新，必须用JavaScript手动设置value属性；常见错误包括value为字符串、超出max范围、省略value导致不确定态，以及用setAttribute而非DOM属性赋值。
progress 标签不会自动动起来，它只是个“进度显示器”，value 改了它才变——不写 JavaScript，<progress value="42" max="100"></progress> 就永远停在 42%。
为什么 progress 没反应？常见赋值错误
很多人在 index.html 里直接写死 value，却没配 JS，结果进度条纹丝不动。更隐蔽的问题包括：
-
value是字符串（如"65"）而非数字，Safari/iOS 可能直接不渲染填充块 -
value="105" max="100"：超出范围会被浏览器忽略，显示为 0% 或空白轨道 - 省略
value属性（<progress max="100"></progress>）→ 进入不确定状态，显示循环动画，不是你想要的百分比进度 - 用
setAttribute('value', 70)而非el.value = 70：部分 iOS Safari 版本会失效
如何用 JavaScript 正确更新 value
必须显式、数值化地设置 value，且每次更新都应校验边界和类型：
- 统一用
Number()转换输入：bar.value = Number(currentPercent) - 防止超限：
bar.value = Math.min(Math.round((loaded / total) * 100), Number(bar.max)) - 上传场景优先监听原生事件：
xhr.upload.onprogress，而不是靠setInterval猜测 - 避免高频重绘：加变更阈值，仅当新值与当前
value相差 ≥ 1 时才写入 DOM
样式定制必须分浏览器写伪元素
原生 progress 不支持常规 CSS 修改内部填充色，只能靠带前缀的伪元素：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Safari：
progress::-webkit-progress-bar控制轨道，progress::-webkit-progress-value控制填充 - Firefox：
progress::-moz-progress-bar控制填充（不支持width过渡） - 所有浏览器都需先加
appearance: none才能生效，否则默认样式会干扰 - 想加平滑效果？只对 WebKit 伪元素加
transition: width 0.3s ease，Firefox 靠浏览器帧刷新模拟
多任务或后台导入时，“100%”的定义最容易出错
批量数据导入、多文件上传这类场景，不能简单按“完成数量 / 总数量”算百分比：
- 3 个文件大小分别是 1MB、100MB、5MB，完成前两个 ≠ 66%，得按字节加权：
Math.round((sumLoadedBytes / sumTotalBytes) * 100) - 某个子任务失败且不重试时，不要冻结
value，而应同步更新aria-valuetext和辅助文本，比如“第 2 项失败，共 3 项，2 项完成” - 后端若无法提供粒度进度（如 Redis 未实时写入），宁可显示“已运行 18 秒，预计剩余 32 秒”，也别硬凑百分比误导用户
