如题；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. 使用karma做多浏览器的UI测试

    avalon1.6开发得差不多,这次使用先进的开发理念进行开发,比如模块化,单元测试什么... ui测试是重要的一环,之前用阿里的totoro,但打开浏览器不方便.于是从webdrieverio, n ...

  2. cap文件的格式说明

    前面24个字节是.cap文件的文件头. 头信息对应的结构体为:struct pcap_file_header {  bpf_u_int32 magic;  u_short version_major; ...

  3. android Button、TabLayout英文自动改小写为大写的问题

    如果是Button自动大写问题,直接设置Button的 textAllCaps="false" 即可: 如果是TabLayout出现全大写问题,先在style.xml加入属性: & ...

  4. LINUX系统一一常用命令

    前言 LINUX UNIX Centos RedHat Ubuntu SHELL shell脚本 shell shell命令 类似windows系统的bat 批处理文件 里面都是脚本 CentOS6. ...

  5. easyui中的几个问题

    easyui中的tree,采用url参数读取json,无法显示.有可能是vs的IIS不支持,$.ajax 原因待测试,有知道的朋友也可以贴代码,我解决的一个办法是 $(function () { $. ...

  6. mab算法

    https://zhuanlan.zhihu.com/p/21388070?refer=resyschina 专治选择困难症——bandit算法 改善:https://zhuanlan.zhihu.c ...

  7. Applese走迷宫-bfs

    链接:https://ac.nowcoder.com/acm/contest/330/C来源:牛客网 题目描述 精通程序设计的 Applese 双写了一个游戏. 在这个游戏中,它被困在了一个 n×mn ...

  8. JAVA 课堂测试

    package ACC; /*信1705-2班 * 20173623 * 赵墨涵 */ public class Account { String accountID; String accountn ...

  9. vue -- 九宫格抽奖

    html: <div class="line_item" :class="index == 1 ? 'active' : 'white_item'"> ...

  10. 05_ssm基础(四)之Spring与持久层的整合

    30.31.spring对jdbc的支持jdbcTemplate 使用Spring的JDBC准备:  1):拷贝jar:       mysql-connector-java-5.1.11.jar:M ...