<progress>标签需用数字赋值value属性而非字符串，配合显式max值和同步span显示百分比；更新须操作DOM属性而非setAttribute，兼容性差时可用transform scaleX的div模拟。
怎么用 <progress> 标签显示动态百分比
直接用原生 <progress> 最省事，但很多人卡在“值不更新”或“显示错位”。它只认 value 和 max 两个属性，不接受百分比字符串（比如 "50%"），必须传数字。
-
value必须是 ≥ 0 且 ≤max的数字；设成负数或超限会导致进度条“消失”（实际渲染为 0%） - 默认
max是 100，但别依赖这个——显式写上更稳，尤其当后端返回的是 0.7 这类小数时，得先乘 100 再取整 - 它本身不显示数字，想旁边写“65%”，得额外加一个
<span>同步更新，不能指望 CSS 伪元素自动读取属性值
<progress id="task" value="65" max="100"></progress> <span id="percent">65%</span>
JavaScript 更新 <progress> 时的常见翻车点
不是所有更新方式都生效：直接改 innerHTML 或用 setAttribute() 写字符串会失败；必须操作 DOM 属性（property），而不是 HTML 属性（attribute）。
- ✅ 正确：
progressEl.value = 82（赋值数字） - ❌ 错误：
progressEl.setAttribute('value', '82')（写字符串，UI 不刷新） - 异步任务中，如果多次快速调用更新，浏览器可能跳帧——加个
requestAnimationFrame节流更顺滑 - IE 完全不支持
<progress>，需降级为<div>+width模拟，但注意 IE 下width: 0%可能渲染异常，建议最低设为width: 1%
纯 CSS 实现兼容性更强的进度条（不用 <progress>）
当需要自定义颜色、圆角、动画，或必须支持老浏览器时，<div> 套 <div> 是更可控的选择。
- 外层容器设固定高度和
overflow: hidden，内层用width控制填充比例（如width: 73%） - 避免用
%单位做过渡动画——浏览器对百分比宽度的重绘不总是平滑，改用transform: scaleX()更稳 - 如果进度值来自 API，注意小数精度问题：
Math.round(percentage * 100) / 100防止出现99.99999999999999%这种显示 - 移动端 Safari 对
transform的硬件加速支持较好，但 iOS 15 之前对scaleX(0)有渲染 bug，建议起始值设为scaleX(0.001)
<div class="progress-bar"> <div class="progress-fill" style="transform: scaleX(0.73)"></div> </div>
为什么数字和进度条不同步？排查顺序
最常被忽略的是数据源和 UI 更新时机不一致，不是样式问题。
立即学习“前端免费学习笔记（深入）”；
- 检查 JS 中是否用了
parseInt()但没传进制参数，导致"08"变成 0（八进制解析） - 确认后端返回的是数字还是字符串——JSON 默认是字符串，
JSON.parse()后也要手动转类型 - React/Vue 等框架里，别直接改原对象属性触发更新，要用响应式赋值（如 Vue 的
this.progress = val，React 的setState） - 进度条动画结束时，CSS
transition可能残留，导致后续更新卡顿；加transition: transform 0.3s ease-out显式声明，避免继承全局样式
数值精度、属性赋值方式、框架响应机制——这三个地方出错，比样式难查得多。
