用::before伪元素实现顶部进度条因纯CSS更轻量、不污染DOM，但需父容器设position:relative，伪元素加content:""和fixed定位，并用JS动态计算滚动进度配合CSS变量驱动width或transform。
为什么不用额外HTML元素，而用 ::before 伪元素实现顶部进度条
因为纯 CSS 实现更轻量、不污染 DOM 结构，尤其适合在已有页面快速注入加载态，避免改 HTML 或加 JS 初始化逻辑。但前提是：父容器必须是 position: relative 或非 static 定位上下文，否则 ::before 的 position: fixed 会脱离预期锚点——这不是 bug，是 CSS 定位规范行为。
常见错误现象：::before 条一闪而过、只在首屏出现、滚动后消失、宽度卡在 0% 不动。根本原因往往是父元素没设 position: relative，导致伪元素的 fixed 被浏览器“重置”为相对于根视口定位，但又因无明确 top/left/right 值而渲染异常。
- 必须给伪元素显式声明
content: ""，否则不渲染 -
position: fixed必须搭配top: 0; left: 0; right: 0;，漏任一值都可能导致偏移或截断 - 不要把伪元素加在
body上直接设fixed—— 多数现代框架（如 React/Vue）会动态替换body内容，导致伪元素被清空 - 推荐挂载到一个稳定容器上，比如
#app或main，并确保该容器有position: relative
::before 进度条的 width 计算为什么不能写死 width: 100%
因为 position: fixed 元素的 width: 100% 是相对于视口宽度（window.innerWidth），不是页面可滚动高度比例。进度条要表达“已滚动 / 总可滚动高度”，这个比值必须由 JS 动态计算并写入内联样式，CSS 本身无法读取 scrollTop 或 scrollHeight。
所以实际流程是：JS 监听 scroll 事件 → 算出 progress = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100 → 设置 element.style.setProperty('--progress', progress) → CSS 用 width: calc(var(--progress) * 1%) 或通过 transform: scaleX() 驱动。
- 务必用
document.documentElement.scrollHeight，不是document.body.scrollHeight，后者在某些 DOCTYPE 下为 0 - 必须减去
window.innerHeight，否则满屏滚动时进度会超 100%，导致条溢出右侧 - 如果用
transform: scaleX()，记得配transform-origin: 0 50%，否则从中心缩放，视觉上像“炸开”而非推进
移动端 Safari 渲染抖动问题怎么用 ::before 规避
iOS Safari 对频繁修改 width 的 ::before 伪元素存在 repaint 延迟，滚动时会出现卡顿或跳帧。根本解法不是降频，而是换用 transform + will-change 组合，把动画交给合成器处理。
实操建议：放弃直接改 width，改用 transform: scaleX(var(--progress))，并在伪元素上加 will-change: transform。注意 scaleX(0.3) 表示 30%，所以 JS 写入的是小数（如 0.3），不是百分比数字（如 30）。
-
will-change: transform必须加在伪元素本身，不是父容器 - 不要在伪元素上同时设
width和transform，否则触发 layout + paint 双重开销 - 若仍抖动，检查是否父容器有
overflow: hidden或clip-path，这些会强制 Safari 回退到软件渲染
如何让 ::before 进度条在页面加载完成时自动隐藏
不能依赖 DOMContentLoaded 后直接 display: none，因为伪元素不响应 JS 的 style.display 修改——它没有 DOM 节点，只能靠 CSS 控制显隐。
正确做法是用 CSS 变量控制 opacity 或 visibility，并配合 transition 实现淡出。例如：初始设 opacity: 1; transition: opacity 0.3s ease-out，JS 加载完后设置 element.style.setProperty('--loaded', '1')，CSS 里写 opacity: calc(1 - var(--loaded)); 或用 @keyframes 配合 animation-fill-mode: forwards。
- 别用
visibility: hidden配 transition，它不触发重绘，过渡无效 - 如果用
opacity，记得加z-index: 9999，否则淡出过程中可能被弹窗遮挡 - 隐藏时机建议监听
window.onload，而非DOMContentLoaded，确保图片、字体等资源也加载完毕
真正难的不是写出那几行 CSS，而是理解 ::before 在 fixed 定位下的行为边界、JS 如何安全注入 scroll 进度值、以及移动端渲染管线对 transform 的特殊要求。漏掉其中任意一环，进度条就会在某个机型或某个滚动速度下突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
