应使用 scrollpos / (document.documentelement.scrollheight - window.innerheight) 计算滚动进度，兼容ie11需用 math.max(body.scrolltop, docel.scrolltop)，并用 math.min(1, math.max(0, progress)) 截断；须通过 requestanimationframe 节流更新，配合阈值判断与 transform: scalex() 实现高性能渲染；动态内容需用 mutationobserver 监听并重算高度。
直接加 <progress></progress> 标签没用——它不会自动响应滚动，必须靠 JS 实时计算并节流更新，否则进度卡顿、跳变、永远不到 100%。
为什么 window.scrollY / document.body.scrollHeight 是错的
常见错误是用 document.body.scrollHeight 当分母，但它在 quirks 模式或某些 iframe 场景下返回 0 或不准确；document.documentElement.scrollHeight 才是标准文档根元素总高度。分母还必须减去 window.innerHeight，否则拉到底部时算出来常是 0.97～0.99。macOS 隐藏滚动条但占位仍在，可能导致结果略超 1，所以务必用 Math.min(1, Math.max(0, progress)) 截断。
IE11 不支持 scrollY，得降级为 document.body.scrollTop || document.documentElement.scrollTop。
- 别写
scrollY / body.scrollHeight - 正确公式：
scrollPos / (document.documentElement.scrollHeight - window.innerHeight) - 兼容 IE11：用
Math.max(document.body.scrollTop, document.documentElement.scrollTop) - 永远 wrap 一层
Math.min(1, Math.max(0, ...))
怎么避免 scroll 事件导致页面掉帧
原生 scroll 事件每秒可触发上百次，同步读取 + 更新 DOM = 主线程过载。禁止写 window.addEventListener('scroll', () => { updateProgress() })。
改用 requestAnimationFrame 节流：只在下一帧重绘前读一次值，天然限制在 60fps。再加个最小更新阈值（比如 ≥ 0.3%），避免微小抖动触发无谓渲染。
- 用
let ticking = false+requestAnimationFrame控制更新节奏 - 缓存上一次渲染的
progress值，仅当差值 ≥0.003才真正更新 DOM - 别在回调里直接改
progress.value或element.style.width，先存变量，统一提交
用 transform: scaleX() 替代 width 动画更高效
<progress></progress> 的内部填充是伪元素（如 ::-webkit-progress-value），各浏览器实现不一致，直接对它加 transition: width 失效或错位。推荐结构：<div class="progress-track"><div class="progress-fill"></div></div>，只动 .progress-fill 的 transform: scaleX(progress)。
transform 触发合成层，不触发重排重绘；配合 will-change: transform 可提前提示浏览器优化。
- 不要给
<progress></progress>加 CSS transition - 用
transform: scaleX()实现平滑拉伸，比改width或left快一个数量级 - 给
.progress-fill加will-change: transform（仅在需要时） - 初始
scaleX(0)，滚动中设为scaleX(progress)
动态内容加载后进度条没更新到 100% 怎么办
页面有懒加载图片、异步插入区块、或 JS 动态补全内容时，document.documentElement.scrollHeight 在首次计算后就固定了，后续内容撑开高度但进度条仍按旧值算，导致拉到底也卡在 90% 左右。
必须监听 DOM 变化，重新计算最大高度。用 MutationObserver 监听 document.body 子节点增删或尺寸变化，并在变化后 setTimeout(..., 0) 延迟一帧再更新，确保 layout 完成。
- 初始化时记录原始
scrollHeight - 用
MutationObserver监听childList和subtree - 每次变化后调用
requestAnimationFrame(() => updateMaxHeight()) -
updateMaxHeight()里重新读document.documentElement.scrollHeight并缓存
最易被忽略的是动态内容场景下的高度重算——很多开发者只做了一次初始化，之后不管新内容怎么撑开页面，进度条就永远“失准”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
