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

浏览器渲染页面DOM文档加载的步骤：
1.解析HTML结构。

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

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

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

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

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

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

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

DomContentLoaded 和 load 区别

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

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

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

  2. js中DOMContentLoaded和load的区别

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

  3. DOMContentLoaded与load的区别

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的 ...

  4. DOMContentLoaded和load的区别

    一.概念 DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的完成加载. load loa ...

  5. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  6. DOMContentLoaded 和 Load 事件 区别（待补充）

    javascript会阻塞dom的解析.当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先 ...

  7. ready与load的区别

    JQuery里有ready和load事件 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() ...

  8. js中== 和===中的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. js onkeypress与onkeydown 事件区别详细说明

    keypress只适用于有字符输入的按键 而keyup/keydown包含了Ctrl, Shift之类的情况 Firefox在处理onKeyDown/onKeyPress事件时存在漏洞,恶意网页可能利 ...

随机推荐

  1. FBackup：个人用途与商业用途都是免费的

    當自己在備份電腦資料時,若沒有使用備份及還原軟體時,我想很多人的作法就是「想到應該要備份了,然後進行備份檔案的壓縮.壓縮好之後複製到不同的磁碟機或燒錄光碟」,等要用的時候,再拿出來還原.若是這樣,其實 ...

  2. 判断页面是否添加了W3C声明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jndi 小案例

    JNDI就是为JAVA中命名和目录服务定义的JAVA API,是命名服务的抽象机制.在J2EE中,JNDI的目的是用来查找J2EE服务器的注册资源.只要该对象在命名服务器上注册过,且你知道命名服务器的 ...

  4. Hibernate 再接触 基础配置 搭建Log4j环境 Junit日志环境等

    <!-- Drop and re-create the database schema on startup --> <property name="hbm2ddl.aut ...

  5. servlet(1)request常用方法

    HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. req ...

  6. hexo发表博文的方式

    本图片转自:简书:https://www.jianshu.com/p/a52b68794a6b 转自github:https://blog.minhow.com

  7. 前往央都之行-gdufe1529

    前往央都之行 Time Limit: 2000/1000ms (Java/Others) Problem Description: 刀光哥桐人和尤吉欧两人为了拯救爱丽丝,同时从卢利特村出发要尽快同时赶 ...

  8. 安装 protoc 的各种坑

    首先下载 protoc 2.6.1   https://github.com/google/protobuf/releases/download/v2.6.1/protobuf-2.6.1.tar.g ...

  9. vc for python2.7

    https://www.microsoft.com/en-us/download/confirmation.aspx?id=44266

  10. hadoop zookeeper高可用

    原文地址: https://blog.csdn.net/dingchenxixi/article/details/51131493 core-site.xml yarn-site.xml