progress标签不更新？必须用JavaScript改value属性
HTML5的<progress></progress>是纯展示组件，它不会自动动起来——哪怕你写了value="50"，它也只显示静态的50%，不会自己从0走到100%。想让它动，得靠JS手动改value属性。
常见错误是直接操作innerHTML或试图用CSS动画“骗”它动，没用。浏览器只认value和max两个属性的实时变化。
-
value必须是数字（不能是字符串"50"），且在0到max之间，否则显示为不确定状态（IE/Edge旧版尤其敏感） - 修改后无需调用任何刷新方法，DOM重绘会自动触发视觉更新
- 别用
setAttribute('value', ...)，而要用el.value = 60——前者可能被忽略，尤其在某些iOS Safari版本中
怎么让progress随Ajax上传进度实时更新
核心是监听XMLHttpRequest.upload.onprogress事件，从中拿到event.loaded和event.total，算出百分比再写进value。
注意：这个事件只对POST请求有效，且服务端必须返回Content-Length头（大部分现代框架默认支持）；如果上传的是Blob或FormData，也要确保没禁用upload监听。
立即学习“前端免费学习笔记（深入）”；
- 先设
max为event.total（或预设一个固定值如100），避免除零或NaN - 计算
value时用Math.min(Math.round(...), max)，防止超限导致进度条“回弹” - 不要每毫秒都设
value，加个节流（比如requestAnimationFrame或简单计时器），否则在低端机上可能卡顿
xhr.upload.onprogress = e => {
if (!e.lengthComputable) return;
const percent = Math.round((e.loaded / e.total) * 100);
progressEl.value = percent;
};progress在Safari里显示异常？检查max和value类型
Safari（尤其是iOS 15及更早）对<progress></progress>的类型校验极严：如果max是字符串"100"，而value是数字30，它可能直接不渲染进度块，只留空轨道。
这不是bug，是规范要求——max和value都应为有效数字，且value不能大于max。很多开发者用模板字符串拼接属性，一不留神就埋了坑。
- 初始化时显式写
<progress max="100" value="0"></progress>，别依赖JS后续补 - JS里统一用
Number()转换输入值：el.max = Number(maxVal); el.value = Number(val); - 用
getComputedStyle(el).getPropertyValue('--webkit-appearance')调试是否被CSS意外重置（某些重置库会干这事）
想自定义样式？只动::-webkit-progress-bar和::-webkit-progress-value
Firefox和Chrome用不同伪元素，但<progress></progress>的样式控制权非常有限：你只能改轨道和填充色，不能改高度、圆角逻辑、阴影等——这些由浏览器原生控件决定，强行覆盖容易失效。
真正可控的只有WebKit系（Chrome/Safari）的两个伪类，Firefox用::-moz-progress-bar，但支持度差，且无法单独控制轨道背景。
- 高度只能通过
height设在<progress></progress>本身上，不是伪元素里 -
border-radius要同时加在<progress></progress>和::-webkit-progress-value上才自然 - 避免用
transform: scale()拉伸，会导致填充错位，尤其在高DPI屏上
progress {
height: 8px;
}
progress::-webkit-progress-bar { background-color: #eee; }
progress::-webkit-progress-value { background-color: #007bff; border-radius: 4px; }实际用的时候，最常被忽略的是max和value的数值一致性，以及Safari对类型强校验的脾气——写JS时顺手Number()一下，比后面花半天查为什么进度条不动要省事得多。
