DOMContentLoaded 和 load 事件的区别

在网页加载时，有两个常用的事件可以用来监听页面是否加载完成，它们是DOMContentLoaded和load事件。

DOMContentLoaded 事件

DOMContentLoaded事件在页面的HTML结构已经被加载并解析完成后触发，此时图片、脚本文件等其他资源可能仍在加载中。当这个事件被触发时，意味着DOM已经可以被操作，因此比load事件更早地执行JavaScript代码。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
});

load 事件

load事件在整个页面（包括图片和脚本文件等）已经加载完毕后触发。当这个事件被触发时，意味着所有的资源都已经被加载，这时可以执行一些需要执行完整页面才能执行的JavaScript代码。

window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
});

区别

• DOMContentLoaded事件发生的时机比load更早，因为它只需等待HTML结构加载完毕，而不需要等待其他资源的加载；
• DOMContentLoaded事件触发时，一些外部资源可能仍在加载中，因此不能保证所有图片和脚本等资源都已经加载完成；
• load事件在所有资源加载完成后触发，可以保证所有的资源都已经加载完成；
• 如果页面上有很多图片或其他大型资源需要加载，那么DOMContentLoaded事件触发的时间会更早，这可以提高页面加载速度。

总之，在实际应用中，DOMContentLoaded事件通常用于执行一些DOM操作或初始化的JavaScript代码，而load事件通常用于执行需要整个页面加载完成后才能执行的JavaScript代码。