为何Load事件先于DOMContentLoaded事件触发？

嗨，这个问题确实挺让人挠头的！先给你拍板一个核心结论：正常情况下，load事件绝对是晚于DOMContentLoaded事件触发的——你遇到的反例大概率是有特殊场景或者代码里的小细节干扰了。

先再理一遍两个事件的本质逻辑，帮你巩固认知：

• DOMContentLoaded：当浏览器把HTML文档完全解析完毕，DOM树构建完成，并且所有带defer属性的脚本都执行完后，就会触发这个事件。这时候页面的样式表、图片、视频这些外部静态资源可能还在加载中，页面甚至可能还没渲染出完整样式。
• load：要等整个页面的所有资源（包括DOM、样式表、图片、iframe、外部脚本等等）全部加载完成，浏览器确认没有需要再加载的内容了，才会触发load事件。

那为什么你会看到load先触发呢？大概率是这几种情况：

• 页面完全没有外部资源：如果你的测试页面里没有图片、样式表、外部脚本，两个事件的触发间隔可能短到毫秒级，浏览器的事件队列处理或者控制台日志的打印顺序偶尔会出现“视觉上的颠倒”，但实际上DOMContentLoaded还是先触发的。
• 代码手动触发了load事件：比如不小心写了window.onload = function(){};之后又手动调用了这个函数，或者用dispatchEvent提前触发了load事件，这就属于人为干扰了。
• 浏览器扩展或调试工具干扰：有些浏览器扩展会修改页面的加载流程，或者调试工具的断点、日志输出机制影响了事件的触发顺序显示。

你可以试试这个测试代码，故意加了大体积的外部资源，就能明显看到顺序：

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            console.log('👉 DOMContentLoaded 触发了');
        });
        window.addEventListener('load', () => {
            console.log('✅ load 触发了');
        });
    </script>
    <!-- 引入大体积样式表和图片，拉长加载时间 -->
    <link rel="stylesheet" href="https://example.com/large-stylesheet.css">
    <img src="https://example.com/large-image.jpg" alt="Big image">
</head>
<body>
    <div>测试内容</div>
</body>
</html>

运行后你会看到，DOMContentLoaded的日志会先出来，等一会儿图片和样式表加载完，load的日志才会打印。

总的来说，正常的网页加载流程里，load事件一定是在DOMContentLoaded之后触发的，出现反例就去排查有没有人为干扰或者特殊环境影响~

内容的提问来源于stack exchange，提问作者Mia