<progress>标签必须同时设置value和max属性且均为有效数字才能显示确定进度；仅设其一、值类型错误或超出范围会导致空白、卡顿或不确定动画，动态更新须用JavaScript直接赋值elem.value并校验范围。
直接写 <progress> 标签不会动，必须同时设 value 和 max，再用 JavaScript 改 value 属性才能看到变化。
为什么 <progress> 写了却没显示进度
浏览器只在 value 和 max 同时存在、且都是有效数字时，才渲染确定进度条。常见失效情况：
-
<progress value="50"></progress>→ 缺max，部分浏览器（如旧版 Safari）可能不显示或显示为不确定动画 -
<progress max="100"></progress>→ 缺value，默认为 0，但某些 UA 渲染为空白 -
<progress value="0.65" max="1"></progress>→ 看似合理，但若后续 JS 传字符串"65"给value，会静默失败（必须是数字） -
max为 0 或负数 → 浏览器截断或忽略，进度条行为异常
怎么用 JavaScript 安全更新 progress.value
不能靠 setAttribute('value', ...)，必须直接赋值 DOM 属性。还要防跳变、卡顿和终值不准：
- 用
elem.value = Number(current)，别传字符串 - 任务开始前先设
elem.value = 0，结束时强制设为elem.max，避免因浮点误差停在 99.999% - 高频更新（如每毫秒）会导致重绘压力，建议节流：只在进度变化 ≥ 1% 或 ≥ 50ms 时更新
- 用
requestAnimationFrame替代setTimeout，让更新更顺滑且不阻塞主线程 - 别监听
input或change事件——<progress>不触发这些，需自己比对前后值做逻辑判断
跨浏览器 CSS 自定义要注意哪些伪元素
各浏览器暴露的内部结构不同，必须分开写，且不能依赖 width 控制进度（那是由 value/max 决定的）：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge/Safari（新版）：
progress::-webkit-progress-bar控制背景槽，progress::-webkit-progress-value控制填充色 - Firefox：
progress::-moz-progress-bar是唯一可样式化的部分（没有独立槽容器） - 所有浏览器都需先加
progress { appearance: none; -moz-appearance: none; }才能生效 - CSS
transition对value变化基本无效，平滑效果得靠 JS 逐帧更新，不是靠 CSS 动画
什么时候不该用 <progress>
它只适合有明确起点、终点和可量化进度的任务。容易被忽略的边界情况：
- “正在思考…”“连接中…”这类无总耗时的操作 → 应用不确定状态（不设
value）或改用<meter>或自定义加载动画 - 磁盘使用率、电量、评分等静态占比 → 必须用
<meter>，语义错误会影响屏幕阅读器理解 - IE11 及以下不支持 → 需降级方案（如
<div class="progress"><span style="width:60%"></span></div>+ ARIA 属性） - Web Worker 中无法直接操作
<progress>→ 必须通过postMessage把进度发回主线程更新，且 Worker 内要节流发送频率
最常被漏掉的是：不设 aria-label 或实时文本同步，导致屏幕阅读器读不出当前百分比；还有人把 max 设成 100 后，却用字节数直接赋 value，结果进度条永远卡在 0%。
