progress.value赋值后不更新，须用el.value=4（数字）而非setAttribute或字符串；缺max或value非法时进度条退为不确定状态；应通过data-属性同步真实业务状态并动态更新value/max。
progress.value 赋值后不更新，检查是否用了 setAttribute
直接写 el.setAttribute('value', 4) 不会触发进度条重绘，这是最常踩的坑。浏览器只响应 DOM property 的变更，不是 attribute。
必须用 el.value = 4（注意是数字，不是字符串）；如果从 dataset 或 input 读值，记得用 +el.dataset.done 或 parseInt() 转型，否则 "4" 会被静默忽略。
-
el.setAttribute('value', '4')→ 进度条不动 -
el.value = "4"→ 同样无效（字符串） -
el.value = 4→ 正确 - 没设
max属性 →el.max默认为 1，el.value = 4直接锁死在 100%
页面刷新后进度条回退或卡住，检查初始值来源是否稳定
F5 刷新时，<progress></progress> 只保留 HTML 中写的初始值，不会自动同步 JS 状态。若你靠 AJAX 加载任务数据再更新进度条，而没在 DOM 加载完成时立即初始化，就会看到“闪一下又归零”或“一直空白”。
正确做法是在 DOMContentLoaded 或 document.readyState === 'interactive' 阶段就同步读取真实状态：
立即学习“前端免费学习笔记（深入）”；
- 把原始数据存在
data-属性里，比如<div id="task" data-total="7" data-done="2"></div> - JS 初始化时：
const p = document.querySelector('progress'); p.max = +task.dataset.total; p.value = +task.dataset.done; - 避免用
innerHTML或模板字符串拼<progress value="2" max="7"></progress>，服务端渲染和客户端 JS 容易脱节
进度条显示“不确定状态”动画（循环横条），排查 value/max 合法性
只要 value 或 max 缺失、为负数、是 NaN、或 value > max，浏览器就退回到“不确定”模式——它不是 bug，是规范行为。
典型错误现场：
-
<progress value="65"></progress>→ 缺max，多数浏览器当max=1处理，65 > 1→ 锁死 -
<progress max="100"></progress>→ 缺value，默认为 0，但部分浏览器渲染为空白而非 0% -
el.value = -5或el.value = NaN→ 静默失效，进度条无反应 - 用
Math.round()之前没做边界检查 →el.value = Math.min(Math.max(0, computed), el.max)才安全
多任务/动态任务下进度不同步，别硬编码分母
把 max="10" 写死在 HTML 里，后续增减步骤却不改它，value 就永远算不准。业务上“100%”必须由当前上下文定义，不能靠猜测。
推荐方案是让 JS 全权管理 “总任务数” 和 “已完成数” 的来源：
- 用
data-total和data-done存原始计数，而不是存百分比 - 每完成一个子任务，只更新
dataset.done，然后统一执行p.value = +el.dataset.done; p.max = +el.dataset.total; - 不要解析类似
"4/7"这样的文本再拆分，容易因空格、斜杠缺失、非数字字符崩掉 - 如需显示 “4/7”，额外加一个
<span id="progress-text"></span>，用 JS 更新textContent，和<progress></progress>解耦
真正难的不是让进度条动起来，而是让它的 value 和 max 始终反映真实业务状态——这个状态可能来自 API、WebSocket、用户操作，甚至多个异步源。一旦源头没对齐，再精细的样式或动画也掩盖不了语义错位。
