JavaScript篇：网页加载的玄机：DOMContentLoaded和load到底差在哪？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个经常和页面加载斗智斗勇的前端工程师。今天咱们聊聊那些年让我掉头发的页面加载事件，特别是DOMContentLoaded和load这对"双胞胎"的区别。

一、先看个实际案例

javascript 复制代码

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

javascript 复制代码

document.addEventListener('DOMContentLoaded', function() {
    // 我要马上操作DOM！
    const myElement = document.querySelector('.my-class');
    myElement.style.color = 'red';
});

2. 需要等资源用load

javascript 复制代码

window.addEventListener('load', function() {
    // 我要获取图片尺寸！
    const img = document.getElementById('my-avatar');
    console.log('我的头像尺寸：' + img.width + 'x' + img.height);
});

四、进阶知识：async和defer的影响

html 复制代码

<script src="me.js" defer></script>
<script src="me.js" async></script>

defer：DOMContentLoaded前执行
async：可能阻塞DOMContentLoaded

小杨踩坑记：曾经因为async脚本导致DOMContentLoaded延迟，页面元素闪动，被产品经理追杀三条街！

五、性能优化技巧

尽早执行：

javascript 复制代码

// 把脚本放在body底部
document.addEventListener('DOMContentLoaded', init);

function init() {
    // 关键初始化代码
}

懒加载非关键资源：

javascript 复制代码

window.addEventListener('load', function() {
    // 加载非关键图片
    const lazyImages = document.querySelectorAll('[data-lazy]');
    lazyImages.forEach(img => {
        img.src = img.dataset.lazy;
    });
});

六、兼容性处理

javascript 复制代码

// 老式写法
document.onreadystatechange = function() {
    if (document.readyState === 'interactive') {
        // 类似DOMContentLoaded
    }
    if (document.readyState === 'complete') {
        // 类似load
    }
};

七、现代开发中的新选择

javascript 复制代码

// 更细粒度的观察
document.addEventListener('readystatechange', function() {
    console.log('当前状态：' + document.readyState);
});

八、总结

DOMContentLoaded：DOM就绪，适合快速交互
load：万事俱备，适合依赖资源的操作
现代开发可以结合readystatechange更精细控制

思考题：

javascript 复制代码

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        console.log('这个log会在load之前还是之后？');
    }, 1000);
});

欢迎在评论区讨论你的理解！下期我会分享更多页面性能优化的实战技巧。