博客
关于我
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/

    你可能感兴趣的文章
    Mysql中触发器的使用示例
    查看>>
    Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
    查看>>
    mysql中还有窗口函数?这是什么东西?
    查看>>
    mysql中间件
    查看>>
    MYSQL中频繁的乱码问题终极解决
    查看>>
    MySQL为Null会导致5个问题,个个致命!
    查看>>
    MySQL为什么不建议使用delete删除数据?
    查看>>
    MySQL主从、环境搭建、主从配制
    查看>>
    Mysql主从不同步
    查看>>
    mysql主从同步及清除信息
    查看>>
    MySQL主从同步相关-主从多久的延迟?
    查看>>
    mysql主从同步配置方法和原理
    查看>>
    mysql主从复制 master和slave配置的参数大全
    查看>>
    MySQL主从复制几个重要的启动选项
    查看>>
    MySQL主从复制及排错
    查看>>
    mysql主从复制及故障修复
    查看>>
    MySQL主从复制的原理和实践操作
    查看>>
    webpack loader配置全流程详解
    查看>>
    mysql主从复制,读写分离,半同步复制实现
    查看>>
    MySQL主从失败 错误Got fatal error 1236解决方法
    查看>>