<progress>标签需JavaScript驱动才能动态更新，仅HTML设置value和max无效；必须通过DOM属性赋值、合理节流、添加无障碍属性并配合自定义文本提示才能正确工作。
<progress> 标签本身不显示数字、不自动更新、不渲染文字，只响应 value 和 max 两个属性的数值变化——你必须用 JavaScript 控制它，否则就是一根静止的空条。
为什么<progress>写了却不动？
常见错误是只在 HTML 里写：<progress value="4" max="7"></progress>，以为这样就能动。其实它只是“快照”，没 JS 驱动就永远卡在初始值。浏览器不会监听数据源、不会轮询、不会绑定事件。
- 没设
value属性 → 进入“不确定状态”，显示循环动画（不是进度） -
value是字符串（如"4"）→ 静默失败，进度条无反应 - 只用
setAttribute('value', 4)→ 大部分浏览器不触发重绘，得改 DOM property：el.value = 4 - 没设
max→ 默认为1，传value="4"就超出上限，进度直接锁死在 100%
怎么让<progress>和任务人数/步骤同步？
别在 HTML 里硬编码 value 和 max，否则增减任务时要改多处，极易脱节。推荐用 data- 属性存原始数据，JS 统一读取计算：
HTML 示例：<div id="task-stats" data-total="7" data-done="4"></div>
立即学习“前端免费学习笔记（深入）”；
- 初始化时：
const el = document.querySelector('#task-stats'); const progress = document.querySelector('progress'); progress.max = +el.dataset.total; progress.value = +el.dataset.done; - 状态变更后，只更新
el.dataset.done，再同步赋值给progress.value，避免解析文本或拆分斜杠 - 如果想显示 “4/7”，额外加一个
<span class="progress-label"></span>，用 JS 更新其textContent
更新value时容易卡顿或跳变？
高频更新（比如每毫秒处理一项）直接写 progress.value = i 会触发大量重排，用户反而看不到平滑效果，甚至只看到 0% → 100% 跳变。
- 用
requestAnimationFrame把更新“让出”到下一帧，不阻塞主线程 - 加节流阈值：只在进度变化 ≥ 1%（或自定义步长）时才写入，例如
if (nextValue > current + 1) { progress.value = nextValue; } - 任务结束前强制写一次
progress.value = progress.max，防止因浮点舍入卡在 99.999%
样式和可访问性不能只靠默认外观
各浏览器对 <progress> 的默认样式差异极大（Chrome 蓝、Firefox 绿、Safari 灰），且无法用普通 CSS 修改填充色——必须用伪元素，而 Firefox 目前只支持 accent-color，其他几乎无效。
- 无障碍必须加：
role="progressbar"+aria-valuenow+aria-valuemin="0"+aria-valuemax，否则屏幕阅读器读不出进度 - 别依赖
<progress>自带文字提示，它不渲染任何文本内容；所有百分比、分数都要自己用<span>或title补充 - 若需强兼容（如仍需支持 IE）或深度定制，老实用
<div class="progress-bar"><div style="transform: scaleX(0.6)"></div></div>模拟，更可控
最常被忽略的点：没有 JS 就没有进度。它不是“写了就能跑”的标签，而是需要你亲手把数据、更新逻辑、边界控制、无障碍属性全串起来的一块砖——少一环，用户看到的就是假进度或没进度。
