标签需同时设置value和max属性才能显示确定进度，仅不可见；动态更新应直接赋值value属性而非innerhtml或setattribute；跨浏览器样式需用伪元素定制；语义上仅适用于已知范围的确定进度。
HTML <progress></progress> 标签必须有 value 和 max 才会显示进度
浏览器默认不渲染空的 <progress></progress>，只写 <progress></progress> 是看不见的。它不是靠 CSS 显示“动效”，而是靠属性驱动状态。
-
value表示当前完成值（必须是数字，且 ≥ 0） -
max表示总量（默认为 100，但显式写上更可控） - 如果
value缺失或不是有效数字，进度条会显示“不确定”状态（部分浏览器画成动画条纹） - 比如：
<progress value="65" max="100"></progress>—— 这才是能看见的确定进度
用 JavaScript 动态更新 <progress></progress> 时别直接改 innerHTML
很多人习惯用 el.innerHTML = '<progress value="...">'</progress> 替换整个标签，这会导致 DOM 重绘、事件丢失、样式闪动，而且没真正“更新”进度逻辑。
- 正确做法是只改属性：
progressEl.value = 72（progressEl是通过querySelector拿到的元素） - 注意：赋值后浏览器自动重绘，不需要调用额外方法
- 如果
value超过max，浏览器会截断显示为 100%（但值本身仍保留），这点容易误判进度是否“溢出” - 不要用
setAttribute('value', '72')—— 它不会触发 UI 更新，必须走 DOM 属性赋值
Chrome/Firefox/Safari 对 <progress></progress> 的默认样式差异不小
原生 <progress></progress> 在不同浏览器里长得不一样：Chrome 是蓝色实心条，Firefox 是绿色渐变+边框，Safari 更细、颜色偏灰。想统一外观，得靠伪元素 + CSS。
- 关键伪元素：
progress::-webkit-progress-bar（Chrome/Safari）、progress::-moz-progress-bar（Firefox） - 不能只写
progress { width: 200px; }就完事 —— 内部轨道和填充是分离的，必须分别控制 - 例如隐藏默认文字（有些浏览器会在进度条里显示 “65%”）：
progress::after { content: ''; }不起作用，得用progress { appearance: none; }配合重置 - 无障碍支持良好：自带 ARIA role="progressbar"，只要
value和max正确，屏幕阅读器能读出进度百分比
<progress></progress> 不适合做加载动画或“假进度”
它语义上表示「已知范围内的确定进度」，比如文件上传完成度、表单填写步骤。如果后端还没返回总大小，或只是模拟“正在加载”，用它反而违反语义，还可能误导辅助技术用户。
- 真不知道总量？用
<meter></meter>不合适，该用带role="status"的<div> + loading spinner <li>服务端流式响应（如 SSE）中逐步知道进度？可以，但得确保每次更新都同步 <code>value和max（比如从响应头拿到 Content-Length 后再设max） - React/Vue 项目里别在循环里高频 set state 更新
value—— 浏览器重绘有上限，10ms 以下的更新会被合并，肉眼看不出区别，还白耗性能
事情说清了就结束。最常被忽略的是：不设
max 时浏览器按 100 算，但一旦你后期动态改了 max，旧的 value 可能瞬间变成超限值，UI 卡住或跳变 —— 这个边界行为几乎没人测试。
