博客
关于我
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 两列互转
    查看>>
    MySQL 中开启二进制日志(Binlog)
    查看>>
    MySQL 中文问题
    查看>>
    MySQL 中日志的面试题总结
    查看>>
    MySQL 中随机抽样:order by rand limit 的替代方案
    查看>>
    MySQL 为什么需要两阶段提交?
    查看>>
    mysql 为某个字段的值加前缀、去掉前缀
    查看>>
    mysql 主从 lock_mysql 主从同步权限mysql 行锁的实现
    查看>>
    mysql 主从互备份_mysql互为主从实战设置详解及自动化备份(Centos7.2)
    查看>>
    mysql 主键重复则覆盖_数据库主键不能重复
    查看>>
    Mysql 优化 or
    查看>>
    mysql 优化器 key_mysql – 选择*和查询优化器
    查看>>
    MySQL 优化:Explain 执行计划详解
    查看>>
    Mysql 会导致锁表的语法
    查看>>
    mysql 使用sql文件恢复数据库
    查看>>
    mysql 修改默认字符集为utf8
    查看>>
    Mysql 共享锁
    查看>>
    MySQL 内核深度优化
    查看>>
    mysql 内连接、自然连接、外连接的区别
    查看>>