如题；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. [leetcode]股票题型123

    122. Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price ...

  2. 使用xshell xftp连接centos的过程。

    1 配置网络 登录Centtos系统,配置网卡. cd 空格/etc/sysconfig/network-scripts  回车键. ls 查看文件 vi ifcig-eth0  编辑这个文件 修改为 ...

  3. ArcGIS（ESRI）的发展历史和版本历史（简介）

    作者:fenghuayoushi 来源:CSDN 原文:https://blog.csdn.net/fenghuayoushi/article/details/6677360   ESRI公司介绍   ...

  4. unity 数学公式

    Mathf.Abs绝对值 计算并返回指定参数 f 绝对值. Mathf.Acos反余弦 static function Acos (f : float) : float 以弧度为单位计算并返回参数 f ...

  5. css 横向滚动条webkit-scrollbar

    最近遇到一个横向滚动条的问题: 官网链接: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar 这个 ::-web ...

  6. javascript中所有函数的参数都是按值传递的

    [javascript中所有函数的参数都是按值传递的] 参考:http://www.jb51.net/article/89297.htm

  7. 关于U3D图片的压缩格式

    http://blog.sina.com.cn/s/blog_930ffa0b0102vass.html

  8. macaca自动化测试以及配置环境问题

    macaca 测试和环境问题 标签(空格分隔): macaca自动化配置环境问题 macaca环境变量配置 基本环境需要准备的东西: JDK的安装及环境配置:(1.8) Node.js的安装及环境配置 ...

  9. python文件操作 二

    问题:在传输的时候对方不知道是以什么格式传给用户,传来传去彼此都忘了什么格式: 在编码的时候:utf8:是3个字符,gbk是2个字符,每个字符数字对应的字符,一段2进制串,如果10个字节全部都是中文, ...

  10. CRM某些表加入审计

    --更新参数文件,设置Audit等级 alter system set audit_trail=db,extended scope=spfile; --更新参数文件,开始Audit alter sys ...