标签必须同时设置合法的value和max属性才能显示确定进度；max是归一化上限值，需为正数，value必须满足0≤value≤max，否则退化为不确定状态。
max 属性不是“总任务量”的直译，而是进度标尺的上限值——它和 value 一起构成归一化比例：当前进度 = value / max。浏览器只认这个比值，不关心单位或物理意义。
max 设成多少才不会出错
必须是正数，不能为 0、负数或字符串（如 max="100px" 或 max="100%"），否则会退化为默认值 1，导致进度条进入不确定状态（显示动画条纹或空白）。
-
max="100"是最常用选择：便于调试、CSS 百分比对齐、与后端返回的百分比数值（如65.3）直接对应 - 离散步骤场景（如“第 3 步 / 共 8 步”）推荐
max="8"：语义清晰，aria-valuenow能准确读出“3” - 字节级上传可用真实总量（如
max="102400000"）：但需确保value同步用浮点数计算，避免整数截断 - 避免小数
max（如max="3.14"）：语法合法但无实际意义，易引发精度混淆
为什么只写 value 不设 max 就不显示
浏览器默认 max="1"，所以 <progress value="65"></progress> 实际被解析为 65 / 1 = 6500%，远超合法范围，多数浏览器静默忽略或强制截断，结果就是进度条空白、卡死，或退化为不确定动画。
- 正确写法必须显式声明两者：
<progress value="65" max="100"></progress> - 哪怕后端返回的是小数（如
value="0.68"），也建议统一设max="1"或max="100"并做一致换算，避免 Safari 等浏览器因类型不一致拒绝渲染 - 动态创建时务必先赋
el.max = 100，再更新el.value；顺序反了会导致首次更新被静默丢弃
动态更新 value 时 max 的配合要点
更新 value 必须用 el.value = x（数字），而不是 setAttribute('value', x)；前者同步生效，后者在高频更新下容易卡顿或失效。
- 网络上传中
event.loaded可能临时大于event.total（如未发Content-Length），务必加保护：el.value = Math.min((loaded / total) * el.max, el.max) - 不要四舍五入再赋值：用浮点数保留精度，比如
el.value = (loaded / total) * 100，而非Math.round(...)，否则容易卡在 99% - 如果用
requestAnimationFrame节流更新，注意它本身不保证帧率稳定；更可靠的方式是靠 CSStransition配合value变化实现视觉平滑
最容易被忽略的是：progress 条一旦 value 为 NaN、负数、或超出 max，就会立刻退化为不确定状态——此时 DevTools 里看 attribute 列可能还“有值”，但 DOM property 已失效。检查时一定要切到 Elements 面板，看实时的 value 和 max 是否都是合法数字且满足 0 ≤ value ≤ max。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
