progress.value赋值后不更新，首要检查是否缺失max属性（默认为1，非100），须显式设置max并确保value为0–max间数字；动态更新应先设max再设value，用el.value=数值赋值，兼容性差时加setattribute兜底。
progress.value 赋值后不更新，先看是不是没设 max
浏览器默认 max 是 1，不是 100。只写 <progress value="75"></progress>，实际是 75 / 1 = 7500%，超出范围，进度条要么满格、要么静默截断为 100%，但 UI 不动。
必须显式声明 max，且确保 value 是数字、≤ max：
-
max推荐统一设为100，便于后端返回整数或前端计算百分比 - 若后端返回小数（如
0.75），可设max="1"，再赋el.value = 0.75 - 动态设置时，**务必先设
max，再设value**，否则value = 80; max = 50会触发满格显示（80 / 50 > 1） - 赋值前主动校验：
el.value = Math.min(maxVal, Math.max(0, newVal))
用 JS 更新 value，该用 .value 还是 setAttribute？
现代 Chrome/Firefox 对 el.value = 42 响应良好；但旧版 Safari、某些 Android WebView 只监听 HTML attribute 变化，setAttribute('value', 42) 更兼容。
稳妥做法：优先用属性赋值，兼容性兜底时加 setAttribute：
- 直接赋值：
progressEl.value = 65—— 快、语义准、推荐作为主路径 - 兼容兜底：
progressEl.setAttribute('value', 65)—— 针对已知有问题的 WebView 环境 - 动态创建的
<progress></progress>，必须先appendChild到 DOM，再设value，否则首次渲染可能跳过 - 避免混用：
el.value = "65"（字符串）或el.setAttribute('value', '65')都会失效——值必须是纯数字
CSS transition 动画不生效？别怪 progress
<progress></progress> 本身不支持 CSS 动画过渡，transition 生效的前提是浏览器能感知到 ::-webkit-progress-value 的宽度变化——而这依赖于 value 和 max 的比例更新。
常见失效原因和解法：
- 没加
appearance: none，私有伪类（如::-webkit-progress-value）不生效 - Chrome 中
::-webkit-progress-value宽度由浏览器自动计算，不能用width覆盖，只能靠background和border-radius控制视觉 - 想平滑动画，不要每帧直接设
value，改用requestAnimationFrame+ 插值：el.value = Math.min(max, el.value + step) - 更轻量方案：用 class 切换 + CSS
transition驱动，比如.is-complete { --prog: 100% }，配合background: linear-gradient(...)
Vue/React 里绑定 value 为啥不更新？
框架不会把 value prop 自动映射到原生 <progress></progress> 的 DOM property。React 中 <progress value="{x}"></progress> 是受控组件写法，但 <progress></progress> 没有 onChange，也不会响应 props 变化。
必须绕过响应式系统，手动操作 DOM：
- React：用
useRef拿到元素，useEffect中赋值：ref.current.value = val - Vue 3：
ref绑定元素，watch数据变化后执行el.value = newVal - 别在
render或setup函数里直接写el.value = ...，此时 DOM 还未挂载 - 如果进度由服务端推送驱动，注意节流：避免连续
value写入（如每 30ms 一次），旧版 Safari 容易卡顿
max 和 value 的设置顺序、数值类型、以及框架环境下 DOM 挂载时机三者叠加出错**。单点问题好查，组合起来就容易反复“看起来写了，就是不动”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
