progress标签的value和max属性必须为数字类型，字符串会导致进度条失效；JS更新时需用parseInt/parseFloat转换，动态max须为正数且大于value，value更新前应边界截断并防抖，dataset宜存原始业务数据。
progress标签的value和max属性必须用数字，不能用字符串
浏览器会把 value 和 max 当作纯数值解析，如果传入 "50"（带引号）或 "100px" 这类非数字字符串，进度条会直接失效（表现为 0% 或不渲染）。JS 更新时务必确保是数字类型：
- 用
parseInt()或parseFloat()显式转换输入值（比如表单输入） - 避免直接赋值
el.value = someVar + ""，这会隐式转成字符串 -
max一般设为固定值（如100），但若需动态变化（如分段上传总大小未知），也必须是正数且大于value，否则进度条显示异常（Chrome 会卡在 100%，Firefox 可能忽略）
实时更新value要防抖+边界检查，别让value超出max
用户拖动、键盘输入、定时器轮询等场景下，value 可能频繁变动。直接无脑赋值容易触发无效状态：
- 更新前先做边界截断：
progressEl.value = Math.min(Math.max(newValue, 0), progressEl.max) - 如果是监听
input事件更新（比如配合 range input），建议加requestAnimationFrame节流，避免连续重绘卡顿 - 注意：修改
value不会自动触发change事件，只有用户交互才会触发；如需同步逻辑，得手动dispatchEvent(new Event('change'))
用dataset存原始数据，避免从progress元素反推业务逻辑
<progress> 只是 UI 表现层，它的 value 和 max 是归一化后的展示值。真实业务中，你很可能需要「已上传字节数 / 总字节数」或「第3步 / 共7步」这类原始数据：
- 把原始数值存在
data-属性里，比如<progress data-total="2048000" data-uploaded="1520640"> - JS 更新时，先算比例：
const ratio = uploaded / total;，再设el.value = ratio * el.max; - 这样既保证进度条正确，又保留了可读性——调试时直接看
dataset就知道当前状态，不用反向计算
IE 不支持 progress，但 value/max 动态设置在现代浏览器里很稳定
IE11 及更早版本完全忽略 <progress> 标签，回退方案只能靠 div 模拟。但只要目标浏览器是 Chrome/Firefox/Safari/Edge（Chromium），value 和 max 的 JS 动态更新没有兼容性陷阱：
立即学习“前端免费学习笔记（深入）”；
- 可以放心用
el.value = 75、el.max = 100直接赋值（不是setAttribute） - 不要用
setAttribute('value', '75')，这会写入字符串属性，导致后续 JS 读el.value得到 NaN - 动画效果靠 CSS transition 控制
progress::-webkit-progress-value等伪元素，JS 只管数据，不操心动效
实际最易忽略的是 value 和 max 的类型一致性——一个数字一个字符串，进度条就静默失败，连控制台警告都没有。
