如题;DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。

浏览器渲染页面DOM文档加载的步骤:

1.解析HTML结构。

2.加载外部脚本和css文件。

3.解析并执行脚本代码。

4.DOM树构建完成。(此时会触发DOMContentLoaded事件)

5.加载外部图片等文件。

6.页面加载完毕。(此时会触发load事件)

从以上DOM文档加载步骤上可以看出;当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件则要等包括图片这些加载完毕才会触发。

我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load。

js中DOMContentLoaded和load的区别的更多相关文章

  1. 【转载】DOMContentLoaded与load的区别

    DOMContentLoaded与load的区别   (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...

  2. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  3. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  4. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  5. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  6. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  7. js DomContentLoaded 和 load 的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  8. [转]html js中name和id的区别和使用分析

    js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, ST ...

  9. 浅谈js中null和undefined的区别

    在JS中,null和undefined是经常让人摸不着头脑的东西,尤其是在数据初始化以及处理的过程中,经常稍微不注意,就会让页面在渲染时出现报错,下面来细说下,这两者之间的区别: null 表示一个对 ...

随机推荐

  1. 【洛谷4396/BZOJ3236】[AHOI2013]作业(莫队+分块/树状数组/线段树)

    题目: 洛谷4396 BZOJ3236(权限) 这题似乎BZOJ上数据强一些? 分析: 这题真的是--一言难尽 发现题面里没说权值的范围,怕出锅就写了离散化.后来经过面向数据编程(以及膜神犇代码)知道 ...

  2. 涨知识 - II

    计算机网络相关 1.在无盘工作站向服务器申请IP地址时,使用的是(     )协议. A.ARP B.RARP C.ICMP D.IGMP 解析: ARP(地址解析协议)是设备通过自己知道的IP地址来 ...

  3. Java系列学习(十一)-内部类

    1.内部类 (1)把类定义在另一个类的内部,该类就称为内部类 (2)内部类的访问规则 A:内部类可以直接访问外部类的成员,包括私有 B:外部类要想访问内部类的成员,必须创建对象 (3)内部类的分类 A ...

  4. python--11、数据库及SQL基础

    常用命令记录 查看库中所有表的引擎 SHOW TABLE STATUS FROM `center_main_db`; 还有一个更简洁,查询cmol_system_db库所有表的存储引擎\ SELECT ...

  5. JS——null

    变量被赋值为null,目的往往是为了销毁这个对象: var n1 = 1; n1 = null;

  6. CSS——继承性

    继承性发生的前提是包含(嵌套关系). 1.文字颜色可以继承 2.文字大小可以继承 3.字体可以继续 4.字体粗细可以继承 5.文字风格可以继承 6.行高可以继承 总结:文字的所有属性都可以继承. 特殊 ...

  7. Centos7 Openstack - (第二节)添加认证服务(Keystone)

    Centos7 install Openstack - (第二节)添加认证服务(Keystone) 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack ...

  8. ADODB.Stream

    读写文本文件时出现了乱码,找到了ADODB.Stream,可以指定字符集读取文本 Function ReadUTF() Filename = "F:\vba\2018 - new\2018- ...

  9. C#---EF映射MySQL

    使用EF CodeFirst连接MySql数据库 如何使用EF CodeFirst连接MySql数据库? 我们这篇文章介绍怎么使用EF连接MySql 作者的环境 VS2017.Win10.MySql5 ...

  10. centos 7 配置nginx

    安装nginx: curl -o  nginx.rpm http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0. ...