HTML原生标签需同时设置合法value和max值才能正常渲染，缺一不可；须用浏览器前缀伪元素自定义样式；动态更新应避免高频赋值；语义上仅用于任务完成度，不可与混用。
HTML 原生 <progress></progress> 标签怎么用才不卡住
直接用 <progress></progress> 标签就能显示进度，但浏览器默认样式丑、不响应式、值没设对会卡在 0% 或直接不渲染。关键不是“能不能用”，而是 value 和 max 必须同时存在且合法——value 小于等于 max，且都得是数字。
常见错误现象：<progress value="50"></progress> 不显示进度（缺 max）；<progress value="100" max="50"></progress> 渲染为满格但语义错误；JS 动态改 value 后 UI 不更新（其实是更新了，但你没看到，因为没加 CSS 过渡或没触发重绘）。
-
max默认是 100，但建议显式写上，避免语义模糊 - 动态更新时，直接赋值
element.value = 65即可，不用调用方法 - IE 完全不支持
<progress></progress>，如需兼容，得 fallback 到<div> + ARIA 属性 <li>无障碍必须加 <code>aria-label或关联<label></label>，否则屏幕阅读器读不出“已加载 72%” - 必须为每个引擎单独写规则，
::-webkit-progress-value才能改已加载部分的背景 -
background写在<progress></progress>本身只影响轨道底色，不是进度条 - Firefox 下自定义能力弱，
::progress-value基本不可靠，建议用 JS +<div> 方案兜底 <li>不要给 <code>::-webkit-progress-value设固定宽度——它由value/max比例自动计算 - 服务端必须返回
Content-Length或用Transfer-Encoding: chunked配合流式解析，否则前端无法算百分比 - 用
AbortController中断请求时，记得手动重置value为 0，否则残留上次状态 - 避免在循环里高频修改
value（比如每 1ms 改一次），浏览器会合并渲染，反而卡顿 - 真实进度 ≠ 时间进度，别用
setTimeout模拟“匀速加载”，用户一眼能看出假 -
<progress></progress>可以没有value（表示 indeterminate 状态，如“正在处理…”）；<meter></meter>必须有value -
<meter></meter>支持low、high、optimum属性做语义标注；<progress></progress>不支持 - 视觉上它们长得像，但换错标签会影响 SEO 和辅助技术理解
CSS 自定义 <progress></progress> 样式为什么没生效
因为不同浏览器用完全不同的伪元素控制内部结构：Chrome/Edge 用 ::-webkit-progress-bar 和 ::-webkit-progress-value，Firefox 用 ::progress-bar 和 ::progress-value（实际支持有限），Safari 更保守。只写通用 CSS 对内部条无效。
使用场景：想把进度条改成圆角、换颜色、加阴影，或者让“已完成”部分有渐变背景。
立即学习“前端免费学习笔记（深入）”；
JavaScript 控制进度条时常见的状态错乱
进度条不是实时传感器，它反映的是你告诉它的值。如果异步任务没按预期完成、回调嵌套过深、或多次快速 set value，UI 就会和真实进度脱节。
典型错误现象：上传文件时进度跳到 100% 又掉回 20%；轮询接口时，后发的响应先到，覆盖了更准确的中间值；fetch 没开 mode: 'no-cors' 导致无法读取 Content-Length，只能靠估算。
用 <meter></meter> 还是 <progress></progress>？别混用
<meter></meter> 表示「已知范围内的标量测量值」，比如磁盘使用率、电量、分数；<progress></progress> 表示「任务完成度」，比如上传、安装、编译。两者语义不同，屏幕阅读器播报方式也不同。
容易踩的坑：用 <meter></meter> 显示文件上传进度——它没有“不确定”状态（indeterminate），而上传刚开始时常无法预估总大小；反过来，用 <progress></progress> 显示 CPU 占用率——它不支持 min/max 之外的低/高/optimum 范围提示，无法表达“75% 是危险值”。
最常被忽略的点：进度条不是动效玩具。它存在的唯一理由是让用户知道“还要等多久”或“现在到哪一步了”。所有样式、动画、JS 更新，都得服务于这个目的，而不是让进度条看起来更“酷”。
