progress 的 value 和 max 必须同时存在且为非负数字，缺一或类型错误（如字符串）会导致进度条不显示或退化为不确定状态；value 超 max 会被静默截断，javascript 更新需直接赋数字而非字符串。
progress 的 value 和 max 必须同时存在且为数字
写了 <progress></progress> 却没看到进度条？大概率是只设了 value 或只设了 max，或者值不是数字类型。浏览器只在两者都存在、且都是非负数字时，才渲染确定进度；缺一或类型错误（比如 value="50" 是字符串），就退回到“不确定状态”——表现为动画横条或干脆空白。
常见失效写法：
-
<progress value="65"></progress>→ 缺max，浏览器默认max=1，value=65直接溢出，进度条不显示或卡死 -
<progress max="100"></progress>→ 缺value，默认为 0，但部分浏览器渲染为空白，不是“0%”，而是“没值” -
<progress value="65" max="100"></progress>→ 正确，能稳定显示 65%
value 超过 max 会被静默截断，不报错但逻辑失真
浏览器对 value 有强制校验：value 按 0 渲染，<code>value > max 按 max 渲染，max ≤ 0 则整个元素行为未定义（多数退化为不确定状态）。这不是 bug，是规范行为，但容易掩盖数据错误。
实际项目中要注意：
- 后端返回的进度值可能未校验（如上传完成时返回
value=105、max=100），前端直接填入会导致用户看到满格，但实际任务状态可能异常 - 用
fetch分块响应时，累计loaded可能略超total（网络抖动或服务端计数偏差），建议更新前做Math.min(value, max) -
max可为任意正数（如文件上传用字节数：max="2097152"），不必非得是 100；但若用小数（如value="0.72"），显式设max="1"更安全
JavaScript 更新 value 必须赋数字，不能用字符串或 setAttribute
progress.value = "50" 不生效，因为 DOM 的 value 属性是 number 类型，字符串不会触发重绘。同样，el.setAttribute('value', '50') 只改 HTML 属性，不更新 DOM 值，进度条不动。
正确做法只有这一种：
- 用点号直接赋值：
bar.value = 50（✅ 数字） - 从 input 读值后必须转数字：
bar.value = Number(input.value)或parseInt(input.value, 10) - 避免节流过度：上传大文件时高频更新（如每 10ms）会卡顿，建议按字节数差值 ≥ 1KB 或时间间隔 ≥ 50ms 更新一次
别把 progress 当 meter 用，语义错了无障碍就废了
<progress value="65" max="100"></progress> 表达的是“任务已完成 65%”，适合文件上传、循环处理等有明确起点和终点的场景；而 <meter value="65" max="100"></meter> 表达的是“当前值在区间内的占比”，比如电量、评分，不强调过程。
混用后果很实际：
- 屏幕阅读器会把
<meter></meter>读成“65 分之 100”，而非“已完成 65%”，用户无法判断任务是否进行中 -
<meter></meter>需要min、low、high、max四个属性才能正确表达区间语义，只写两个属性等于白用 - 如果只是想显示百分比进度，坚持用
<progress></progress>，别图省事套<meter></meter>
