progress标签需同时设value和max才显示确定进度，否则因默认max="1"导致value超限而显示不确定状态；更新value须用el.value=number而非setAttribute；顶部进度条需CSS容器定位；真进度需监听资源加载而非document.readyState。
progress标签必须同时设value和max才能显示确定进度
只写<progress value="30">，进度条大概率不显示 30%，而是变成不确定状态（脉冲动画）——因为浏览器默认max="1"，而value="30"远超范围，被静默截断或忽略。正确做法是显式声明两者：<progress value="0" max="100">。如果用字节或项数做单位（比如上传 2456/10000 字节），就写<progress value="2456" max="10000">，避免浮点误差或小数精度问题。
更新value要用el.value = number，别用setAttribute
常见错误是写el.setAttribute('value', '75')，这只会改 HTML 属性，Safari 和部分旧版 Chrome 根本不响应。必须直接赋值 DOM 属性：el.value = 75。注意：传入值要是数字，不是字符串；从接口拿到的data.progress要转成数字，比如Number(data.progress)或+data.progress。还要防超限：el.value = Math.min(Math.round(loaded / total * 100), el.max)，否则网络抖动可能让 value > max，导致进度条卡住或回退。
网页顶部进度条不能靠progress自己定位，得用CSS包裹容器
<progress>本身不支持position: fixed或top等布局属性，强行加会失效。正确方式是套一层<div class="progress-top">，再用 CSS 控制这个容器的位置和尺寸：
`.progress-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 9999;
}
.progress-top progress {
width: 100%;
height: 100%;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
progress::-webkit-progress-bar { background-color: #e0e0e0; }
progress::-webkit-progress-value { background-color: #4CAF50; }
progress::-moz-progress-bar { background-color: #4CAF50; }`关键点：高度控制在容器上（如height: 3px），不要试图给<progress>本身设height；伪元素样式必须配合appearance: none才生效；Firefox 不支持分设轨道和填充色，所以::-moz-progress-bar要同时管背景和填充。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
真进度不是靠document.readyState，得监听真实资源加载
document.readyState只有loading/interactive/complete三态，无法映射百分比——比如从loading跳到interactive可能卡在 20%，也可能卡在 90%。要做出可信的顶部进度条，必须结合：PerformanceObserver监听资源加载耗时、XMLHttpRequest.upload.onprogress捕获上传进度、fetch配合ReadableStream读取响应流，再配合超时兜底（比如 3 秒没进展就强制推进到 80%）。单纯用定时器模拟“0→100”只是假进度，用户感知反而更差。
最容易被忽略的是：progress 标签本身不触发重绘优化，高频更新（比如每毫秒设一次 value）会阻塞主线程。实际中应限制更新频率，用requestAnimationFrame节流，或至少按 50ms 间隔合并计算值。
