progress标签需同时设置value和max才显示进度；value必须为数字，max不可省略；未知总长时用indeterminate；js更新需节流防卡顿。
progress 标签必须设置 value 和 max 才能显示进度
浏览器默认不会把 <progress></progress> 渲染成“动起来”的进度条——它只在 value 有值且 ≤ max 时才显示当前填充状态。如果漏设 max（默认为 100），但 value 设成 0.7，那实际会当 0.7/100 处理，几乎看不见进度。
常见错误是用 JS 动态赋值却忘了初始化 max：
<progress id="load"></progress><script>
const p = document.getElementById('load');
p.value = 65; // ❌ 没设 max，按默认 100 算，但语义混乱
</script>
- 始终显式声明
max，尤其当后端返回的是 0–1 小数时：<progress max="1" value="0.37"></progress> -
value必须是数字，字符串如"0.37"在部分旧浏览器中可能不生效 - 若数据加载阶段未知总长度（比如流式上传），可用
indeterminate状态：<progress max="100" value=""></progress>或直接省略value属性
用 JavaScript 更新 progress 的 value 要避免频繁重绘
每调用一次 element.value = x 都会触发一次渲染。如果从 WebSocket 或 fetch 的 onprogress 里高频更新（比如每毫秒一次），UI 可能卡顿，且人眼根本分辨不出细微变化。
- 加节流：用
requestAnimationFrame或简单计时器限制更新频率，例如每 50ms 最多更新一次 - 只在变化超过阈值时更新：
if (Math.abs(newVal - current) > 0.5) { p.value = newVal; } - 注意：不要在循环里连续赋值，比如
for (let i=0; i —— 浏览器只会渲染最后一次
progress 样式兼容性差，自定义外观必须用伪元素
Chrome、Firefox、Edge 对 <progress></progress> 的默认样式差异大，且 Safari 直到 15.4 才支持 ::-webkit-progress-value，更早版本完全无法定制填充色。想统一外观，只能靠 CSS 伪元素 + 浏览器前缀。
progress {
appearance: none;
height: 8px;
}
progress::-webkit-progress-bar { background-color: #eee; }
progress::-webkit-progress-value { background-color: #4a90e2; }
progress::-moz-progress-bar { background-color: #4a90e2; }
-
appearance: none是必须的，否则各浏览器保留原生样式干扰覆盖 - Safari 15.4 之前无法修改填充色，只能接受灰底蓝条；如需兼容，建议 fallback 到纯 CSS 实现的模拟进度条
- 不要尝试用
background直接盖住整个<progress></progress>，会遮挡内部填充逻辑
与 fetch / XMLHttpRequest 结合时，progress 事件不是万能的
XMLHttpRequest 的 onprogress 只在响应体分块到达时触发，且需服务端开启 CORS 并暴露 Content-Length；fetch 原生根本不提供上传/下载进度事件，必须靠 ReadableStream 手动读取 body 并计算已读字节数。
- GET 请求通常无法获知响应总大小（除非服务端返回
Content-Length），此时progress只能用于 indeterminate 状态 - POST 上传时，
XMLHttpRequest.upload.onprogress可靠，但fetch需搭配form-data+ReadableStream+transform stream才能拿到进度，复杂度高 - 别依赖
progress做关键逻辑判断（比如“到 95% 就提交表单”），它只是 UI 反馈，状态应以网络请求完成为准
真正难的不是写 <progress></progress> 标签，而是让它的数值和真实数据传输节奏对齐——这取决于服务端响应头、客户端网络栈、以及你愿意为兼容性付出多少额外代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
