应优先用模拟滚动进度条而非，因其兼容性更好、样式可控；需用scrolly/(scrollheight-innerheight)*100精确计算百分比，并用requestanimationframe节流更新，配合transform: scalex()实现高性能渲染。
滚动进度条的 DOM 结构怎么写才不踩坑
直接用 <progress></progress> 标签最省事，但注意它默认有浏览器样式（比如 Chrome 会加圆角和阴影），且 value 必须在 min 和 max 范围内，否则不渲染。更稳妥的做法是用 <div> 模拟：一个外层容器设固定高度和背景色，内层 <code>div 用 width 或 transform: scaleX() 控制填充比例。避免用 height 做纵向填充——滚动方向是垂直的，但进度条视觉上通常是横向的，用宽度控制更符合直觉和 CSS 渲染性能。
如何准确计算滚动百分比
核心公式是：(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100。注意三个关键点：
-
scrollHeight要取document.documentElement，不是document.body，否则在某些 DOCTYPE 下会不准 -
window.innerHeight是可视区高度，不能用document.body.clientHeight替代，后者可能忽略滚动条占位 - 结果要
Math.min(100, Math.max(0, ...))截断，防止因小数精度或布局抖动导致超出范围
监听滚动时 performance.now() 和 requestAnimationFrame 怎么选
直接在 scroll 事件里更新 DOM 会频繁触发重排重绘，卡顿明显。正确做法是用 requestAnimationFrame 节流：
- 把滚动读取（
scrollY、scrollHeight）放在scroll回调里，但只设一个标志位 - 在
requestAnimationFrame回调里真正计算并更新进度条样式 - 不要用
setTimeout或throttle工具函数替代——它们无法保证与屏幕刷新同步，容易出现“跳帧”感
示例关键逻辑：
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const progress = Math.min(100, Math.max(0,
(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
));
progressBar.style.transform = `scaleX(${progress / 100})`;
ticking = false;
});
ticking = true;
}
});
CSS 中 scaleX() 和 width 的性能差异在哪
用 transform: scaleX() 比直接改 width 更高效，因为前者只触发合成器层（compositor），不触发布局（layout）和绘制（paint）。尤其当进度条父容器有复杂子元素或阴影时，这点更明显。但要注意：scaleX() 默认以左上角为原点缩放，需配合 transform-origin: left center 对齐；如果用 width，记得设 box-sizing: border-box，避免 padding 影响计算结果。
另外，iOS Safari 对 transform 在 fixed 容器里的渲染有时有偏移，若进度条用 position: fixed，建议加 will-change: transform 触发硬件加速，但别滥用——它本身有内存开销。
