可通过监听document和window事件及资源加载api实时监控页面资源状态，分为dom就绪、资源开始加载、所有资源完成加载三阶段，结合readystatechange、onload/onerror、performance.getentriesbytype()和performanceobserver实现精细化控制与监控。
可以通过监听 document 和 window 的事件，结合资源加载 API，实时掌握页面资源（如脚本、样式、图片、iframe 等）的加载状态。核心在于区分“DOM 准备就绪”“资源开始加载”“所有资源完成加载”三个阶段，并合理使用对应机制。
监听页面整体加载完成：window.onload 与 document.readyState
window.onload 在页面所有资源（包括图片、样式表、脚本、iframe 等）全部下载并解析完毕后触发；document.readyState 则提供更细粒度的状态反馈：
-
loading：文档仍在加载中，
和部分可能未解析完 - interactive：DOM 构建完成，但图片、样式等外部资源可能还在加载（此时可安全操作 DOM）
-
complete：所有资源加载完毕，等同于
window.onload触发时机
推荐用 document.addEventListener('readystatechange', ...) 监听变化，比轮询更高效：
document.addEventListener('readystatechange', () => {
if (document.readyState === 'interactive') {
console.log('DOM 已就绪，可操作节点');
} else if (document.readyState === 'complete') {
console.log('所有资源加载完成');
}
});
监听单个资源加载状态：onload / onerror 回调
对动态创建或已知的资源元素（如 <img>、<script></script>、<link>、<iframe></iframe>），直接绑定 onload 和 onerror 事件最可靠：
- 图片加载失败时，
onerror会触发，可用于兜底替换或上报 - 动态插入的脚本可通过
script.onload确保执行顺序 - 注意：内联
<script></script>或带defer/async的脚本不触发onload（除非是动态创建）
const img = new Image();
img.src = '/avatar.jpg';
img.onload = () => console.log('图片加载成功');
img.onerror = () => console.log('图片加载失败');
获取已加载资源列表：performance.getEntriesByType()
利用 performance.getEntriesByType() 可以查询已记录的资源加载详情（需在资源加载完成后调用，通常在 load 事件后）：
-
getEntriesByType('resource')返回所有网络资源（js/css/img/font 等）的性能条目 - 每个条目含
name（URL）、startTime、duration、responseStatus（HTTP 状态码）、transferSize等字段 - 注意：需启用
performance.setResourceTimingBufferSize()避免条目被截断（尤其资源多时）
window.addEventListener('load', () => {
const resources = performance.getEntriesByType('resource');
resources.forEach(r => {
console.log(`${r.name}: ${r.duration}ms, status ${r.responseStatus}`);
});
});
拦截与监控所有资源请求：PerformanceObserver（推荐用于现代监控）
PerformanceObserver 能持续监听新进入性能条目的资源（包括后续动态加载的），比一次性调用 getEntriesByType 更适合长期监控：
- 监听类型设为
'resource'，回调中处理新增资源项 - 支持过滤（如只关注 js/css）、聚合统计、错误识别（
duration === 0或responseStatus !== 200） - 需手动调用
observer.takeRecords()获取历史条目（适用于页面已加载后再初始化 observer 的场景）
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
if (entry.initiatorType === 'img' && entry.duration === 0) {
console.warn(`图片 ${entry.name} 可能加载失败或被缓存`);
}
});
});
observer.observe({ entryTypes: ['resource'] });Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
