原生 标签需手动设数字型 value 和 max，否则不渲染；样式须用私有伪元素（如 ::-webkit-progress-value）定制；JS 更新需防高频、加节流、处理失败回退；框架中须正确绑定响应式属性。
HTML 原生 <progress></progress> 怎么用才不卡死
直接用 <progress></progress> 标签是最轻量、语义最准的方案，但它默认不带样式、不自动更新、且值必须手动控制。常见错误是写完标签就以为“进度条出来了”，结果页面上只有一条灰线，或者 value 写成字符串（如 "50"）导致不渲染。
-
max和value都必须是数字，value超过max会被截断，但不会报错 - 浏览器原生样式差异大：Chrome 显示为蓝色填充条，Firefox 是绿色，Safari 更细更淡——别指望开箱即用的视觉一致性
- 它不触发任何事件，想监听进度变化？得自己用 JS 定时轮询或配合逻辑更新
value - 示例：
<progress value="30" max="100"></progress>
这行代码本身合法，但若 JS 没动它，它永远停在 30%
CSS 自定义进度条为什么 background-image 会失效
很多人想用渐变或图片做进度填充，结果发现 background-image 在 <progress></progress> 上无效——因为各浏览器对伪元素的实现不同，不能直接在标签上套背景图。真正起作用的是 ::-webkit-progress-bar 和 ::-moz-progress-bar 这类私有伪元素。
- WebKit（Chrome/Safari）下，填充色靠
::-webkit-progress-value控制，必须加background-color，background-image通常被忽略 - Firefox 只支持
::-moz-progress-bar，且不支持渐变背景，只认纯色 - 安全做法是用
linear-gradient+clip-path或绝对定位遮罩模拟，而不是硬怼 background-image - 一个可用的最小自定义示例：
progress { -webkit-appearance: none; height: 8px; }<br>progress::-webkit-progress-value { background: linear-gradient(90deg, #4a6fa5, #6b9dd6); }
JS 动态更新 <progress></progress> 的三个关键时机
进度条不是“设一次值就完事”，真实场景里它得响应加载、计算、上传等过程。最容易踩的坑是：值更新了但 DOM 没重绘，或者更新频率太高导致卡顿。
- 文件上传时，监听
XMLHttpRequest.upload.onprogress，取event.loaded / event.total算百分比，注意除零保护 - Promise 链式任务（比如多个 fetch 串行），别在每个
.then()里直接改value，应统一用计数器 + 总步数推算 - 避免高频更新：如果每毫秒都设
progress.value = i++，浏览器可能丢帧。用requestAnimationFrame或节流到 30fps 以内更稳 - 别忘了失败回退：网络中断或 Promise reject 后，
progress.value应设为 0 或保持当前，而不是留着假进度
Vue/React 里用 <progress></progress> 为什么老是不更新
框架里绑定 value 属性看似简单，但容易忽略响应性机制和属性映射规则。React 中 value 是受控属性，Vue 中需用 :value 绑定，写成 value="{{percent}}" 就失效。
- React：必须用
value={this.state.progress}+max={100}，单独写defaultValue不会响应后续变化 - Vue：
<progress :value="percent" :max="100"></progress>，漏掉冒号就是静态字符串，不会响应 data 变化 - SSR 场景下，服务端渲染的
<progress></progress>初始值可能和客户端不一致，导致 hydration mismatch，建议初始设为 0，再由 JS 触发真实进度 - 不要在模板里写内联样式覆盖原生样式，比如
style="width: 200px;"，这会破坏部分浏览器的内部布局逻辑
