如题;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. 337 House Robber III 打家劫舍 III

    小偷又发现一个新的可行窃的地点. 这个地区只有一个入口,称为“根”. 除了根部之外,每栋房子有且只有一个父房子. 一番侦察之后,聪明的小偷意识到“这个地方的所有房屋形成了一棵二叉树”. 如果两个直接相 ...

  2. Google广告屏蔽插件adBlock

    今天在博客园写博客的时候发现莫名其妙的在右侧被植入了广告,询问了管理员得知存在以下几种可能: 1.电信网络供应商劫持网页,植入广告 2.ADSafe(是一款去除广告的软件,效果很不错) 但经过最终排除 ...

  3. SQL基本操作——DROP撤销索引、表以及数据库

    DROP撤销索引.表以及数据库 --DROP INDEX 命令删除表格中的索引 DROP INDEX table_name.index_name --DROP TABLE 语句删除表(表的结构.属性以 ...

  4. [入门指南]-技术学习-Ebean

    占坑 官网

  5. Split()函数

    最近遇到一个有趣的问题关于使用Split函数 ,该函数能够根据传递的参数拆分,并返回一个string的数组. 贴出一个奇怪的例子 using System; using System.Collecti ...

  6. 一个ROS的服务,使机器人向前移动指定距离

    源代码有点长,放文末链接里了. 服务描述及代码现在的服务是:请求时携带要前进的距离,然后底盘前进相应距离.代码如下,改动很小: #!/usr/bin/env python import rospyfr ...

  7. Linux快速入门教程-进程管理ipcs命令学习

    使用Linux系统必备的技能之一就是Linux进程管理,系统运行的过程正是无数进程在运行的过程.这些进程的运行需要占用系统的内存等资源,做好系统进程的管理,对于我们合理分配.使用系统资源有非常大的意义 ...

  8. iOS 中plist文件中配置key值冲突的现象

    iOS开发一些特殊的软件需要在项目中配置对应的key值,然而近期在项目中发现一个有意思的现象,苹果官方文档中提供的key值很多,但其实有一些彼此可能有冲突,当你同时配置了彼此冲突的key值,可能会出现 ...

  9. 1.2 Java“白皮书”的关键术语

        Java的设计者已经编写了颇有影响力的“白皮书”,来解释设计的初衷以及完成的情况,并且发布了一个简短的摘要.这个摘要用下面11个关键术语进行组织: 简单性 面向对象 分布式 健壮性 安全性 体 ...

  10. 《ABCD组》第八次作业:ALPHA冲刺

    <ABCD组>第八次作业:ALPHA冲刺 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://ww ...