大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。
我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。
技术qq交流群：906392632
大家好，我是小杨，一个经常和页面加载斗智斗勇的前端工程师。今天咱们聊聊那些年让我掉头发的页面加载事件，特别是DOMContentLoaded和load这对"双胞胎"的区别。
一、先看个实际案例
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM准备好了，我可以操作元素啦！比如：' + document.getElementById('me').textContent);
});
window.addEventListener('load', function() {
console.log('所有资源都加载完了，包括图片和视频！');
});
小杨解说：这两个事件就像餐厅吃饭——DOMContentLoaded是餐具摆好了可以开吃，load是所有菜都上齐了。
二、核心区别对比表
| 特性 | DOMContentLoaded | load |
|---|---|---|
| 触发时机 | DOM树构建完成 | 所有资源加载完成 |
| 能否操作DOM | ✅ 可以 | ✅ 可以 |
| 包含图片/样式等资源 | ❌ 不包含 | ✅ 包含 |
| 执行速度 | 较快 | 较慢 |
| 使用场景 | 初始化DOM操作 | 需要获取图片尺寸等操作 |
三、实际开发中的选择
1. 首选DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
// 我要马上操作DOM！
const myElement = document.querySelector('.my-class');
myElement.style.color = 'red';
});
2. 需要等资源用load
window.addEventListener('load', function() {
// 我要获取图片尺寸！
const img = document.getElementById('my-avatar');
console.log('我的头像尺寸：' + img.width + 'x' + img.height);
});
四、进阶知识：async和defer的影响
<script src="me.js" defer></script>
<script src="me.js" async></script>
- defer：DOMContentLoaded前执行
- async：可能阻塞DOMContentLoaded
小杨踩坑记：曾经因为async脚本导致DOMContentLoaded延迟，页面元素闪动，被产品经理追杀三条街！
五、性能优化技巧
- 尽早执行：
// 把脚本放在body底部
document.addEventListener('DOMContentLoaded', init);
function init() {
// 关键初始化代码
}
- 懒加载非关键资源：
window.addEventListener('load', function() {
// 加载非关键图片
const lazyImages = document.querySelectorAll('[data-lazy]');
lazyImages.forEach(img => {
img.src = img.dataset.lazy;
});
});
六、兼容性处理
// 老式写法
document.onreadystatechange = function() {
if (document.readyState === 'interactive') {
// 类似DOMContentLoaded
}
if (document.readyState === 'complete') {
// 类似load
}
};
七、现代开发中的新选择
// 更细粒度的观察
document.addEventListener('readystatechange', function() {
console.log('当前状态：' + document.readyState);
});
八、总结
- DOMContentLoaded：DOM就绪，适合快速交互
- load：万事俱备，适合依赖资源的操作
- 现代开发可以结合
readystatechange更精细控制
思考题：
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
console.log('这个log会在load之前还是之后？');
}, 1000);
});
欢迎在评论区讨论你的理解！下期我会分享更多页面性能优化的实战技巧。
