博客
关于我
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之union和order by分析([Err] 1221 - Incorrect usage of UNION and ORDER BY)
    查看>>
    Mysql之主从复制
    查看>>
    MySQL之函数
    查看>>
    mysql之分组查询GROUP BY,HAVING
    查看>>
    mysql之分页查询
    查看>>
    Mysql之备份与恢复
    查看>>
    mysql之子查询
    查看>>
    MySQL之字符串函数
    查看>>
    mysql之常见函数
    查看>>
    Mysql之性能优化--索引的使用
    查看>>
    mysql之旅【第一篇】
    查看>>
    Mysql之索引选择及优化
    查看>>
    mysql之联合查询UNION
    查看>>
    mysql之连接查询,多表连接
    查看>>
    mysql乐观锁总结和实践 - 青葱岁月 - ITeye博客
    查看>>
    mysql也能注册到eureka_SpringCloud如何向Eureka中进行注册微服务-百度经验
    查看>>
    mysql乱码
    查看>>
    Mysql事务。开启事务、脏读、不可重复读、幻读、隔离级别
    查看>>
    MySQL事务与锁详解
    查看>>
    MySQL事务原理以及MVCC详解
    查看>>