如题；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. Mac下如何安装WebStorm + 破解

    1.官网下载       下载地址   选择好系统版本以后,点击DOWNLOAD        2.安装 双击下载好的安装包.将WebStromt拖入application文件夹,然后在Launchp ...

  2. 447. Add Strings

    原文题目: 447. Add Strings 解题: 字符串的当做整数来做加法,其实就是大数加法的简化版本 思路: 1)考虑不同位数,如"1234"+“45”,需要先处理低两位,再 ...

  3. git-04 同意分支合并

    https://blog.csdn.net/boysky0015/article/details/78185879/

  4. C# CefSharp 可监听请求等

    原地址:https://blog.csdn.net/jinxiu0406/article/details/80365140 bug1:在抓取js文件的时候,有时候数据未获取全,文本被截断了.在IRes ...

  5. centos 安装mysql数据库

    在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB. 1 下载并安装MySQL官方的 Yum Re ...

  6. Mac中opencv批量对图片进行二值化

    对灰度图像进行二值化,传入的图片是手写汉字的截图,通过二值化把字的部分提出来.用ostu进行二值化 #include <stdio.h> #include <iostream> ...

  7. C++读取txt和保存到txt

    哇,今天又重新用C++来写了一些代码发现自己竟然在类的使用和文件读取和保存上面特别头疼,于是,各种问度娘+各种翻看之前的代码.不禁感叹,自己的代码还是写的太少了,对这些一点都不熟悉.于是,今晚!一定! ...

  8. Excel批量修改文件

    [1]把下图片放在一个文件目录下面,如E:\SVM_Class\airplanes [2]点击“开始”→“运行”(或按快捷键win+R),在弹出框中输入“cmd”,进入dos操作界面.   [3]do ...

  9. CRTD模拟MFG工单进行绑定优化

    需求:按单按库生产的CRTD状态半成品工单重复创建问题 绑定成功案例: SELECT DEMANDLINEID,SUPPLYORDERID,DEMANDORDERID,QTYALLOCATED,ITE ...

  10. 强制改变css样式优先级

    .list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...