<progress>标签需同时设置value和max属性才能渲染，且value必须为非负数字、不能是字符串；IE11及以下不支持，需降级方案；高频更新须用requestAnimationFrame避免卡顿；样式定制跨浏览器差异大，复杂需求建议手写div+ARIA属性。
直接用 <progress> 标签就能跑起来，但不设 value 和 max 两个数字属性，它就根本不会显示进度——不是“没动”，是压根没渲染。
为什么 <progress> 标签写了却看不见
常见错误是只写 <progress></progress> 或只带一个属性，比如 <progress value="50"></progress>。浏览器要求 value 和 max 同时存在且都为有效数字，缺一不可。
-
value必须 ≥ 0，且不能是字符串（"50"不行，得是50或Number("50")） -
max默认是100，但显式写上更稳，比如max="100"或max="2048"（上传文件时常用字节数） - 如果
value>max，部分浏览器会静默截断，部分会卡在 100%，别依赖这种行为 - IE11 及以下完全不识别该标签，必须准备降级方案
怎么安全更新 value 而不卡死页面
高频直接赋值 bar.value = i（比如在 for 循环里从 0 到 100）会导致主线程阻塞、UI 冻结、甚至浏览器警告“脚本未响应”。
- 用
requestAnimationFrame()替代for循环：它把更新交给浏览器渲染帧，自然节流 - 别在 Promise 链每个
.then()里单独设一次value，应统一用计数器 + 总步数算百分比 - 上传场景中，必须先校验
event.lengthComputable === true，否则event.loaded / event.total会是NaN - 网络中断或
fetchreject 后，记得手动设bar.value = 0或保持当前，别留个假进度
Chrome/Firefox 自定义样式为什么总失效
因为它们用的伪元素完全不同，且规则互不兼容：::-webkit-progress-value 在 Chrome/Edge 里管用，Firefox 基本无视；而 ::-moz-progress-bar 在 Firefox 里只能整体覆盖背景，无法单独控制“已填充部分”。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge：必须写
progress::-webkit-progress-bar（容器）和progress::-webkit-progress-value（填充块），后者不能设display: block，否则宽度归零 - Firefox：只支持
appearance: none+ 整体background，::progress-value几乎无效，别白费劲 - 所有浏览器下，
<progress>默认是inline元素，想设宽高或居中，得先加display: block - 渐变填充别硬套
background-image—— 它在伪元素里大多被忽略，改用linear-gradient+clip-path或绝对定位遮罩更可靠
什么时候该放弃 <progress> 改用手写 <div>
当你要圆角+阴影+文字叠加+动画曲线+IE 兼容+无障碍读出“72% 已完成”时，原生标签的定制成本远高于手写方案。
- 手写方案核心结构是外层
<div class="progress-container">+ 内层<div class="progress-bar" style="width: 72%"></div> - 必须加
role="progressbar"和aria-valuenow/aria-valuemin/aria-valuemax，否则屏幕阅读器读不出进度 - 用
transition: width 0.3s ease实现平滑动画，避免 JS 每帧重绘 - 上传类场景若需显示“剩余时间”或“速度 KB/s”，原生标签无对应 API，只能靠手写 + 后端返回额外字段
真正难的不是画出那条蓝线，而是让它的数值始终和真实任务对齐——value 更新时机、失败回退、跨浏览器渲染一致性、无障碍支持，这四点漏掉任一个，用户看到的就是个装饰品。
