load和DOMContenLoaded的区别-白红宇

load和DOMContenLoaded的区别

阅读量：804 次

发布时间：2023-02-06

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

DOM加载与DOMContentLoaded事件

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

DOM加载步骤如下：

解析HTML结构

加载外部脚本和样式表文件

解析并执行脚本代码

构造HTML DOM模型（DOMContentLoaded执行点）

加载图片等外部文件

页面加载完毕（load执行点）

从上述流程可见，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提供了多种文档加载方法：

$(document).ready(function() { ... })：在DOM结构构建完成后执行，适用于大多数场景。

$(function() { ... })：与$(document).ready等效。

$(document).load(function() { ... })：在页面完全加载后执行，包括外部资源。

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

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

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

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

你可能感兴趣的文章