HTML5 的 value 属性修改后进度条不动，根本原因是 JS 修改的是 property 而非 attribute，部分浏览器（如旧版 Safari）仅响应 attribute 变化；应使用 setAttribute('value', val) 或确保先设 max 再设 value 并校验范围。
HTML5 <progress></progress> 的 value 属性改了但进度条不动
直接原因：浏览器只在元素首次渲染或 DOM 属性（attribute）变化时触发重绘，而 JS 修改的是 property（属性值），不是 attribute（HTML 属性）。progress.value = 50 改的是 JS 对象的 property，<progress value="50"></progress> 这个 attribute 没变，部分浏览器（尤其是旧版 Safari、某些 Android WebView）不会响应。
- 用
progress.setAttribute('value', 50)强制同步 attribute，兼容性更稳 - 现代 Chrome/Firefox 对 property 修改响应良好，但别默认它“一定生效”
- 如果
progress是通过 JS 动态创建的，记得先 append 到 DOM 再设value，否则初始渲染可能跳过更新
用 requestAnimationFrame 更新 <progress></progress> 时卡顿或跳变
常见于循环中直接写 progress.value = ++i，没做节流，导致帧率失控或数值突变。浏览器未必每帧都重绘 <progress></progress>，尤其当更新频率远超 60fps 时，property 设置会被丢弃或合并。
- 把更新逻辑包进
requestAnimationFrame回调里，但别在里面疯狂递归调用——用标志位控制是否已调度 - 避免每次只加
1这类小步长；按目标值线性插值更平滑：progress.value = Math.min(max, progress.value + step) - 如果只是想“从 0 走到 100”，优先用 CSS transition + class 切换，比 JS 驱动更省资源
<progress></progress> 在 Vue/React 中绑定后不响应
框架会接管 DOM 更新逻辑，直接改原生 progress.value 属于“绕过响应式系统”，Vue 不会监听，React 的受控组件模式下也会被下一次 render 覆盖。
- Vue 中：用
v-bind:value或:value绑定 data/ref，改数据而非 DOM - React 中：确保是受控组件，
value来自 state，更新用setState，别手动操作ref.current.value - 若必须用 ref 直接操作（比如动画库集成），记得在
useEffect或mounted后再改，并清除旧动画帧
设置 max 和 value 顺序影响显示结果
<progress max="100"></progress> 初始化时若没设 value，默认为 0；但如果先设 value = 80，再设 max = 50，最终显示会是 100%（因为 80 / 50 > 1），但 DOM 上 value property 仍是 80 —— 浏览器按比例裁剪，不报错也不警告。
立即学习“前端免费学习笔记（深入）”；
- 始终先设
max，再设value，尤其在动态配置场景下 - 设
value前主动校验：value = Math.min(value, max)，避免意外满格 - 不要依赖
progress.value的返回值判断“是否完成”，它可能超出max；应比较progress.value / progress.max >= 1
最常被忽略的是 attribute 和 property 的隐式分离——看着代码改了，其实浏览器根本没收到“新值”的信号。动手前先查 progress.getAttribute('value') 和 progress.value 是否一致，比猜快得多。
