如题;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. 【知识总结】后缀数组(Suffix_Array)

    又是一个学了n遍还没学会的算法-- 后缀数组是一种常用的处理字符串问题的数据结构,主要由\(sa\)和\(rank\)两个数组组成.以下给出一些定义: \(str\)表示处理的字符串,长度为\(len ...

  2. 最近几道hihocode不会做的题目

    几个易错点 1.数据范围一定要开大,一般多开10个或者5个. 2. 从经常写 int a[n], 然后访问a[n], 这显然会下标越界. 3. 浮点数,无法精确的比较,等于,大于,小于, 都需要使用e ...

  3. 自学Python十二 战斗吧Scrapy!

    初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 还是先推荐几个学习的教程:Scrapy 0.2 ...

  4. html5——背景

    背景大小 background-size: % %;//宽 高 background-size: 100px 100px;//宽 高 background-size: cover;//覆盖,图片会完全 ...

  5. nagios插件nagiosql安装配置

    nagios插件nagiosql安装配置 # Nagiosql install [root@Cagios ~]# yum install -y libssh2 libssh-devel [root@C ...

  6. java_io学习_编码

    package io; public class encodingDemo{ public static void main(String[] args) throws Exception{ // T ...

  7. profiler-gpu分析记录

    查看 Android 手机芯片信息下面以 夜神模拟器为例 D:\cmderλ adb devices # 1. 列出安卓设备List of devices attached127.0.0.1:6200 ...

  8. [系统资源攻略]CPU

    linux系统中如何查看cpu信息? 查看linux版本.cpu.位数.内核.内存等信息 linux下查看CPU,内存,机器型号,网卡等信息的方法 查看服务器物理CPU数和CPU核数方法介绍 可以用/ ...

  9. Oracle开发常用函数 max 最大数 自动加 1 的模式

    create sequence bs_com_seq increment by 1 start with 1 minvalue 1 maxvalue 999999 cycle nocache orde ...

  10. JAVA学习总结-基础语法

    /** * 这篇文章供自己学习JAVA总结回顾使用 * 主要借鉴了马士兵老师的视频进行总结 * @author Kingram */ 标识符的概念和命名规则 JAVA常量---不可变的变量 程序的执行 ...