progress 元素是纯展示控件，不存储进度数据，需业务逻辑主动计算并显式更新 value 属性；读取时直接访问 bar.value，注意未设置时返回 0、超限自动截断、DOM 未就绪需判空；它不触发 change/input 事件，须在更新 value 时手动调用回调。
progress 元素本身不存储或提供进度数据
<progress></progress> 是纯展示控件，它没有内置 API 读取当前值，也不能主动上报进度。你看到的“进度”完全取决于你手动设置的 value 属性——它只是个静态快照，不是传感器。
想拿到任务的真实进度，必须由业务逻辑（比如 AJAX 请求、Web Worker、定时器）持续计算，并显式更新 progress.value；反过来，你也只能通过读取这个属性来“取”它，而不是从元素身上“获取”状态。
如何安全读取 progress.value 的当前值
直接访问 progress.value 即可，但要注意几个边界情况：
- 如果
progress没设value（即未开始），value返回0，不是NaN或undefined - 如果设了
value但超出max范围（比如max="100"却value="120"），浏览器会自动截断为max，读出来的仍是合法数值 - 若元素尚未渲染（比如 JS 在 DOM 加载前执行），
querySelector可能返回null，需判空
const bar = document.querySelector('progress');
if (bar) {
const current = bar.value; // 直接读，无需 .getAttribute()
console.log(`当前进度：${current}/${bar.max}`);
}
常见错误：把 progress 当作事件源监听进度变化
<progress></progress> 不触发 change 或 input 事件——哪怕你用 JS 改了 value，也不会自动派发。这是最容易踩的坑。
立即学习“前端免费学习笔记（深入）”；
正确做法是：在你自己更新进度的地方，同步调用自定义逻辑：
- 不要写
progress.addEventListener('input', ...)—— 它永远不会执行 - 每次设置
progress.value = x后，立刻执行你的回调，比如onProgressUpdate(x) - 如果需要统一响应，可封装一个 setter 函数，内部完成赋值 + 触发逻辑
function setProgress(bar, value) {
bar.value = Math.min(Math.max(value, 0), bar.max);
onProgressUpdate(bar.value); // 显式调用
}
// 使用
setProgress(document.querySelector('progress'), 65);
与 Web Worker 或 Fetch 配合时的典型结构
真实场景中，进度来自异步任务。关键点在于：进度数据必须由任务主动推送，不能靠 progress 反向拉取。
例如用 fetch 读大文件：
- 必须用
ReadableStream+getReader()分块读取 - 每收到一块，就根据已读字节数 / 总字节数算出百分比，再更新
progress.value -
Content-Length响应头必须存在，否则无法预知总大小
又比如 Web Worker 中跑计算密集任务：Worker 用 postMessage({ type: 'progress', value: 72 }) 主动通知，主线程收到后更新 progress.value。
真正难的从来不是怎么读 progress.value，而是怎么让那个 value 始终反映真实任务状态——这得靠你设计好数据流，而不是指望 HTML 元素自己变聪明。
