本文共 967 字，大约阅读时间需要 3 分钟。

DOM加载与DOMContentLoaded事件

页面加载完成时，load和DOMContentLoaded事件会被自动触发，但它们的执行时机存在显著差异。了解这些差异对于优化用户体验至关重要。

DOM加载步骤如下：

从上述流程可见，DOMContentLoaded事件在第4步执行，而load事件在第6步完成后触发。因此，DOMContentLoaded事件会在页面加载完毕之前执行，这使得它比load事件更符合用户体验。

例如，以下代码能够清晰地展示事件执行顺序：

window.addEventListener("load", function () {    console.log("load执行");}, false);window.addEventListener("DOMContentLoaded", function () {    console.log("domContentLoad执行");}, false);

结果显示，DOMContentLoaded事件先于load事件执行。

JQuery提供了多种文档加载方法：

值得注意的是，JQuery的文档准备方法（ready）在构建DOM结构时即执行，而load方法等待所有资源加载完毕后才执行。

IE支持onreadystatechange事件，当document.readyState变为"complete"时触发相应代码。然而，这一事件的可靠性较低，特别是在页面包含大量二进制资源时，可能会因资源加载延迟而无法准确触发。

因此，建议优先使用DOMContentLoaded事件，它在大多数情况下能够确保DOM结构稳定，适合执行大部分客户端逻辑。

转载地址：http://mfufk.baihongyu.com/