最早安全触发进度条的时机是 DOMContentLoaded 事件，此时 DOM 已构建完成但资源未加载完，需用 JS 动画模拟进度，并在首屏内容就绪、关键资源加载后分阶段更新宽度，3 秒后强制隐藏。
页面加载初期如何触发进度条显示
浏览器解析 html 是自上而下流式进行的，document.readystate 为 loading 时 dom 尚未构建完成，此时无法操作元素。真正能安全插入并启动进度条的最早时机是 domcontentloaded 事件，但这时资源（如图片、css、js）可能还没加载完——所以纯前端实现的“页面加载进度”其实只能模拟，无法精确反映网络资源加载百分比。
常见做法是在 <head> 中内联一段极简 CSS + JS，让进度条在首屏渲染前就存在，并用 requestAnimationFrame 或定时器驱动动画，不依赖资源加载状态：
<style>
#loading-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #0d6efd; z-index: 9999; transition: width 0.2s ease; }
</style>
<script>
const bar = document.createElement('div');
bar.id = 'loading-bar';
document.head.before(bar);
let width = 0;
const timer = setInterval(() => {
width += Math.random() * 15;
if (width >= 90) clearInterval(timer);
bar.style.width = width + '%';
}, 200);
</script>如何与 Bootstrap 的组件或样式协同不冲突
Bootstrap 自身不提供原生加载进度条组件，但它的实用类（如 bg-primary、rounded-pill）可用于美化自定义进度条。注意避免直接使用 .progress 类——它依赖内部结构（.progress-bar），且默认有 overflow: hidden 和固定高度，不利于做顶部细条效果。
若坚持用 Bootstrap 的语义化写法，可这样轻量集成：
<div class="position-fixed top-0 start-0 h-1 bg-primary" id="loading-bar" style="width: 0%; z-index: 9999;"></div>
关键点：
- 用
position-fixed而非.fixed-top，后者会添加padding-top干扰布局 - 用
h-1（Bootstrap 5 中为 0.25rem）而非h-2，更接近主流加载条视觉高度 - 不要套
.progress容器，否则需额外重置overflow和height - 动画靠 JS 控制
width，不依赖@keyframes或transition做匀速推进，否则难以匹配真实加载节奏
何时隐藏进度条才合理
不能只监听 window.onload，因为该事件等同于所有资源（含图片、iframe）加载完毕，用户早已看到完整页面，此时再隐藏进度条会有明显延迟感。更合理的策略是分层控制：
- DOM 构建完成（
DOMContentLoaded）时将进度条设为90%，表示“主要内容已就绪” - 关键资源（如首屏图片、核心 JS）通过
Promise.all()监听，完成后设为100% - 无论是否达 100%，3 秒后强制隐藏（防卡死）
示例逻辑：
document.addEventListener('DOMContentLoaded', () => {
bar.style.width = '90%';
Promise.all([
new Promise(r => document.querySelector('#main-img')?.complete ? r() : document.querySelector('#main-img').addEventListener('load', r)),
import('./critical-module.js')
]).then(() => {
bar.style.width = '100%';
setTimeout(() => bar.remove(), 300);
});
});
setTimeout(() => bar.remove(), 3000);移动端和低性能设备上的注意事项
在低端 Android 或 iOS Safari 上，频繁修改 style.width 可能引发重排，导致动画卡顿。应优先使用 transform: scaleX() 替代 width 变更：
bar.style.transformOrigin = 'left';
// 后续更新时：
bar.style.transform = `scaleX(${width / 100})`;另外，iOS Safari 对 fixed 定位在滚动时有渲染 bug，建议加 will-change: transform 提升图层：
bar.style.willChange = 'transform';
最后，别忘了在加载完成时移除元素而非仅设 display: none，避免残留节点影响后续 JS 查询或内存占用。
真正难的不是画一条进度条，而是判断“用户觉得页面还没好”的那个瞬间——它既不在 DOM 加载完，也不在所有图片加载完，而在首屏文本可读、主按钮可点、滚动不卡顿的临界点。这个点没法用一个事件捕获，得靠组合信号和合理兜底。
