一、从“装修房子”理解页面加载
想象一下你在装修一套新房：
DOMContentLoaded 相当于房间的墙壁、天花板、地板等主体结构已经完成，家具可以开始搬入摆放
load 则表示所有装修彻底完成，连窗帘、装饰画、小摆件都全部到位，可以直接入住了
二、DOMContentLoaded：DOM解析完成的里程碑
1. 什么是DOMContentLoaded？
DOMContentLoaded事件在HTML文档完全被加载和解析完成时触发，无需等待样式表、图像和子框架的完全加载。
// 监听DOMContentLoaded的几种方式
// 方式1：传统方式
document.addEventListener(‘DOMContentLoaded’, function() {
console.log(‘DOM已完全加载和解析’);
});
// 方式2：jQuery方式
$(document).ready(function() {
console.log(‘DOM准备就绪’);
});
// 方式3：简写
document.onreadystatechange = function() {
if (document.readyState === ‘interactive’) {
console.log(‘DOM解析完成’);
}
}
2. 关键特征
✅ 不等待样式表加载完成
✅ 不等待图片加载完成
✅ 不等待iframe加载完成
✅ 只关心HTML文档结构和DOM树构建
3. 触发时机示例
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”slow.css?delay=3000″> <!– 3秒后返回 –>
</head>
<body>
<script>
document.addEventListener(‘DOMContentLoaded’, () => {
console.log(‘DOMContentLoaded触发’); // 几乎立即触发
});
</script>
<img src=”large-image.jpg” alt=”大图”> <!– 需要时间加载 –>
</body>
</html>
三、load：完全加载的完成信号
1. 什么是load事件？
load事件在整个页面及所有依赖资源（图片、样式表、脚本等）完全加载完成后触发。
// 监听load事件
window.addEventListener(‘load’, function() {
console.log(‘所有资源加载完成’);
console.log(‘图片数量：’, document.images.length);
console.log(‘样式表数量：’, document.styleSheets.length);
});
// 或者
window.onload = function() {
console.log(‘页面完全加载’);
};
2. 关键特征
✅ 等待所有资源加载完成
✅ 包括图片、样式表、脚本、iframe等
✅ 表示页面“完全就绪”
3. 性能监控中的应用
// 计算页面加载性能
window.addEventListener(‘load’, () => {
// 使用Performance API获取详细时间
const perfData = window.performance.timing;
const loadTime = perfData.loadEventEnd – perfData.navigationStart;
const domReadyTime = perfData.domContentLoadedEventEnd – perfData.navigationStart;
console.log(`页面完全加载耗时：${loadTime}ms`);
console.log(`DOM解析完成耗时：${domReadyTime}ms`);
console.log(`资源加载耗时：${loadTime – domReadyTime}ms`);
});
四、核心差异对比表
对比维度
DOMContentLoaded
load
触发时机
DOM树构建完成
所有资源加载完成
等待资源
不等待样式表、图片
等待所有资源
执行顺序
先触发
后触发
用户感知
首屏可交互
页面完全就绪
优化重点
关键渲染路径
资源加载优化
五、实际应用场景
1. DOMContentLoaded 适用场景
// 场景1：初始化DOM操作
document.addEventListener(‘DOMContentLoaded’, () => {
// 绑定事件监听器
document.getElementById(‘btn’).addEventListener(‘click’, handleClick);
// 初始化UI组件
initCarousel();
initDropdowns();
// 发送初始数据请求
fetchInitialData();
});
// 场景2：埋点统计
document.addEventListener(‘DOMContentLoaded’, () => {
// 上报DOM解析完成时间
const timing = performance.timing;
const domReady = timing.domContentLoadedEventStart – timing.navigationStart;
analytics.track(‘dom_ready_time’, domReady);
});
2. load 适用场景
// 场景1：资源相关操作
window.addEventListener(‘load’, () => {
// 图片懒加载检查
checkLazyImages();
// 统计资源加载情况
const failedResources = performance.getEntriesByType(‘resource’)
.filter(r => r.duration === 0);
// 初始化依赖全资源的第三方SDK
initThirdPartySDK();
});
// 场景2：性能监控
window.addEventListener(‘load’, () => {
// 核心性能指标计算
const perf = performance.timing;
const metrics = {
FP: perf.responseEnd – perf.navigationStart, // 首次绘制
FCP: calcFirstContentfulPaint(), // 首次内容绘制
LCP: calcLargestContentfulPaint(), // 最大内容绘制
FID: estimateFirstInputDelay() // 首次输入延迟
};
reportPerformance(metrics);
});
六、高级技巧与注意事项
1. 异步脚本的影响
<!– async脚本不会阻塞DOMContentLoaded –>
<script async src=”analytics.js”></script>
<!– defer脚本在DOMContentLoaded前执行 –>
<script defer src=”vendor.js”></script>
<!– 普通脚本会阻塞 –>
<script src=”blocking.js”></script> <!– 会延迟DOMContentLoaded –>
2. 现代性能优化
// 更精细的加载控制
if (document.readyState === ‘loading’) {
// 文档仍在加载
} else if (document.readyState === ‘interactive’) {
// 相当于DOMContentLoaded
initCriticalFeatures();
} else if (document.readyState === ‘complete’) {
// 相当于load
initNonCriticalFeatures();
}
// 使用requestIdleCallback处理非关键任务
window.addEventListener(‘load’, () => {
requestIdleCallback(() => {
loadNonCriticalImages();
prefetchNextPage();
});
});
3. 常见误区
// ❌ 错误：在load中执行过多任务会导致响应变慢
window.onload = () => {
doHeavyComputation(); // 会阻塞用户交互
loadAdvertisement(); // 非关键资源
};
// ✅ 正确：分层加载策略
document.addEventListener(‘DOMContentLoaded’, () => {
initEssentialFeatures(); // 关键功能立即初始化
});
window.addEventListener(‘load’, () => {
initSecondaryFeatures(); // 次要功能延迟初始化
});
// 使用setTimeout拆解任务
setTimeout(() => {
loadNonCriticalResources();
}, 1000);
七、性能优化实战建议
优化DOMContentLoaded
精简HTML结构
脚本使用async/defer
内联关键CSS
避免同步AJAX请求
优化load时间
图片懒加载
代码分割
资源预加载/预连接
使用HTTP/2或HTTP/3
监控指标
// 综合性能监控
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === ‘largest-contentful-paint’) {
console.log(‘LCP:’, entry.startTime);
}
}
});
observer.observe({ entryTypes: [‘largest-contentful-paint’] });
总结
理解DOMContentLoaded和load的区别是前端性能优化的基础。简单来说：
DOMContentLoaded 关注“什么时候可以看到页面”
load 关注“什么时候可以完全使用页面”
在实际开发中，我们应该：
在DOMContentLoaded阶段完成关键功能的初始化
在load阶段处理非关键资源和监控
通过合理的资源加载策略缩小两个事件的时间差
持续监控这两个时间指标，作为性能优化的关键参考
掌握这两个事件的工作原理和优化方法，能够显著提升页面的加载性能和用户体验。记住：更快的DOMContentLoaded意味着用户能更快开始交互，更快的load意味着用户能获得完整体验。
