必须同时设置 value 和 max 属性才能渲染 progress 标签；仅设 value 会失效，max 默认为100但需显式声明；value 超 max 会被截断，IE11 及以下不支持，需降级；JS 更新需防抖、用 requestAnimationFrame、统一计算百分比；样式兼容性差，Chrome/Firefox 伪元素规则不同；复杂需求应改用 div + ARIA 手写方案。

标签必须同时设 value 和 max 才能渲染，缺一不可；只靠 HTML 写完就“自动动起来”是错觉，真实学习进度得靠 JS 主动更新、防抖、回退。

为什么<progress>写了却没显示进度

最常见错误是只写 <progress value="45"></progress>，漏了 max。浏览器要求两个属性都存在且都是数字类型：value 不能是字符串（"45" 不行，得是 45 或 Number("45")），max 默认是 100，但显式写上更稳，比如 max="120"（对应 120 小节课程）。

其他典型问题包括：

• value 超过 max：部分浏览器静默截断为 100%，别依赖这个行为
• IE11 及以下完全不识别该标签，页面直接空白，必须准备降级方案
• 没加 CSS，<progress> 默认是 inline 元素，宽高极小，看起来像一条线甚至看不见

怎么用 JS 安全更新学习进度而不卡顿

学习进度通常来自用户点击“下一节”、完成测验、或定时播放视频后触发的回调——不是高频连续事件，但容易因逻辑嵌套或多次触发导致值错乱。

关键做法：

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 用 requestAnimationFrame() 包裹 DOM 更新，避免在事件循环中密集赋值 bar.value = n
• 不要在每个 .then() 里单独设一次 value，统一用计数器 + 总课时算百分比：bar.value = Math.round((completed / total) * bar.max)
• 用户跳转章节时，先设 bar.value = 0，再异步加载新内容，避免视觉残留假进度
• 课程加载失败或网络中断后，手动恢复到上一个已确认完成的 value，别留个悬停在 87% 的条

Chrome/Firefox 自定义样式为什么总失效

因为它们根本不共享同一套伪元素规则：::-webkit-progress-value 在 Chrome/Edge 里控制填充块，Firefox 基本无视；而 ::-moz-progress-bar 在 Firefox 里只支持纯色背景，不支持渐变或圆角。

实际能落地的最小兼容写法：

• 先加 progress { -webkit-appearance: none; display: block; height: 8px; }
• Chrome/Edge：必须同时写 progress::-webkit-progress-bar（轨道）和 progress::-webkit-progress-value（填充），后者不能设 display: block，否则宽度归零
• Firefox：只认 progress::-moz-progress-bar，且只接受 background-color，别试 linear-gradient 或 border-radius
• 所有浏览器下，想加文字（如“第 23/120 节”）必须用外部 <span>，<progress> 内容文本仅作降级 fallback，不参与渲染

什么时候该放弃<progress>改用手写<div>

当你的学习平台要支持 IE、需要在进度条上叠加当前章节标题、加阴影/圆角/动画曲线、或读屏器必须准确播报“已完成 62%，剩余 45 分钟”，就该切到 <div class="progress-bar"><div class="progress" style="width: 62%"></div></div> 方案。

手写方案的优势很实在：

• 样式 100% 可控，clip-path 做圆角渐变、transform: scaleX() 做弹性入场动画都无压力
• 无障碍可直接加 aria-valuenow、aria-valuemax、aria-label，不用猜浏览器是否透传
• IE 兼容性天然拉满，连 transition 都能在老版本里跑起来
• 后续想加“暂停/重试”按钮、拖拽调整进度、双色分段（如“已学/未学/待复习”），结构上更灵活

真正麻烦的不是写法，而是每次更新都要同步维护 DOM 宽度、ARIA 属性、以及可能存在的外部文案——这些细节一漏，学习者在屏幕阅读器里听到的就是“进度条，未知值”。