博客
关于我
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 编译安装 window篇
    查看>>
    mysql 网络目录_联机目录数据库
    查看>>
    MySQL 聚簇索引&&二级索引&&辅助索引
    查看>>
    Mysql 脏页 脏读 脏数据
    查看>>
    mysql 自增id和UUID做主键性能分析,及最优方案
    查看>>
    Mysql 自定义函数
    查看>>
    mysql 行转列 列转行
    查看>>
    Mysql 表分区
    查看>>
    mysql 表的操作
    查看>>
    mysql 视图,视图更新删除
    查看>>
    MySQL 触发器
    查看>>
    mysql 让所有IP访问数据库
    查看>>
    mysql 记录的增删改查
    查看>>
    MySQL 设置数据库的隔离级别
    查看>>
    MySQL 证明为什么用limit时,offset很大会影响性能
    查看>>
    Mysql 语句操作索引SQL语句
    查看>>
    MySQL 误操作后数据恢复(update,delete忘加where条件)
    查看>>
    MySQL 调优/优化的 101 个建议!
    查看>>
    mysql 转义字符用法_MySql 转义字符的使用说明
    查看>>
    mysql 输入密码秒退
    查看>>