DOMContentLoaded 事件

字面上看,它会在dom加载完成后触发。

与window.onload事件非常相似,但有一定区别:

  1. DOMContentLoaded 事件是在文档完全加载和解析之后触发;
  2. window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等;

下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述:

1.   请求得到html文档,根据文档请求更多的img,css及其它资源文件;

2.   解析文档得到两个东西,dom tree and cssom tree;

3.   依据上面两个tree生成render tree;

4.    根据render tree进行布局并在其中绘制相关元素。

以webkit为例,它的渲染流程如下:

DOMContentLoaded事件触发时机:

在DOM后,RENDERtree之前。

JavaScript加载和执行会迟滞DOMContentLoaded 事件的触发。

JavaScript要等待CSS渲染完成再去加载和执行,因为浏览器无法确定JavaScript是否需要DOM元素信息。

为确保JavaScript获取的是最新的信息,会首先加载和渲染CSS。

参考文档:

http://www.softwhy.com/article-9783-1.html

https://www.cnblogs.com/CandyManPing/p/6635008.html

https://www.cnblogs.com/caizhenbo/p/6679478.html

DOMContentLoaded 事件的更多相关文章

  1. DOMContentLoaded事件

    今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...

  2. Window.onLoad 和 DOMContentLoaded事件的先后顺序

    相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...

  3. 模拟DOMContentLoaded事件

    window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...

  4. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

  5. HTML5-常见的事件- DOMContentLoaded事件

    一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则 ...

  6. HTML load事件和DOMCOntentLoaded事件

    JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行”   普通script标签会阻塞DOM的解析 DOMcontentLoa ...

  7. DOMContentLoaded事件中使用异步

    概述 我在之前的博文(Performance面板看js加载)中提到过,如果利用监听DOMContentLoaded事件的方式来加载js是不能优化加载的,不能够替代jquery中的ready方法,原因是 ...

  8. JS、CSS以及img对DOMContentLoaded事件的影响

    最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...

  9. load/domContentLoaded事件、异步/延迟Js 与DOM解析

    一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...

  10. 深入理解Javascript封装DOMContentLoaded事件

    最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加w ...

随机推荐

  1. css全站字体,中文英文不同,粗细统一

    @font-face { font-family: vwfont; src: url(/shop-m/public/fonts/VWText-Regular.otf); } @font-face { ...

  2. 【PAT甲级】1110 Complete Binary Tree (25分)

    题意: 输入一个正整数N(<=20),代表结点个数(0~N-1),接着输入N行每行包括每个结点的左右子结点,'-'表示无该子结点,输出是否是一颗完全二叉树,是的话输出最后一个子结点否则输出根节点 ...

  3. 从TCL欲成JDI股东看,面板行业进入“群架”时代

    当下,屏幕早已成为第一入口.PC.智能手机.平板电脑.电视.家庭智能终端.智慧交通.智能穿戴设备.汽车中控大屏--种种设备都是以屏幕为最重要的视觉呈现方式,让人们在一个个奇幻世界中畅游.也正是因为屏幕 ...

  4. Python3问题TypeError: object() takes no parameters

    1. Python中关键字变量和特殊函数,都是以__xxx__来表示的 初学Python的朋友,需要注意其中变量名中前后是有两个下划线(_)的,如果不注意,调用内部关键字变量和特殊函数时,将会出现错误 ...

  5. 安装和配置Linux系统虚拟机

    1.打开虚拟机软件 2.点击创建新的虚拟机,选择典型(推荐)类型的配置. 3.点击稍后安装操作系统. 4.客户机操作系统选择Linux,版本选择CentOS 7 64位. 5.虚拟机名称可自行更改,位 ...

  6. 微信小程序前端坑

    链接:https://www.cnblogs.com/showMagic/p/7677551.html

  7. java linux安装jdk,git, maven

    jdk8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html mkdir ...

  8. JavaScirpt - 模块的写法

    传送门 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 原始写法 function f1() { // do sth. ...

  9. Spring Boot FreeMarker 使用教程

    FreeMarker 跟 Thymeleaf 一样,是一种模板引擎,他可以无缝兼容 FreeMarker 在 Spring Boot 开发者中仍然有着很高的地位. 本章重点内容 编写一个最简单的 Fr ...

  10. Qt连接mysql数据库遇到QMYSQL driver not loaded

    本文件向各位博友分享一下我在Qt开发过程中,连接mysql数据库时遇到的问题,以及解决的方法,希望对遇到同样问题的博友有所帮助. 工程运行环境:vs2015+Qt5.8 在开发过程中,编写数据库连接函 ...