DOMContentLoaded 事件
DOMContentLoaded 事件
字面上看,它会在dom加载完成后触发。
与window.onload事件非常相似,但有一定区别:
- DOMContentLoaded 事件是在文档完全加载和解析之后触发;
- 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 事件的更多相关文章
- DOMContentLoaded事件
今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...
- Window.onLoad 和 DOMContentLoaded事件的先后顺序
相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...
- 模拟DOMContentLoaded事件
window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- HTML5-常见的事件- DOMContentLoaded事件
一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则 ...
- HTML load事件和DOMCOntentLoaded事件
JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行” 普通script标签会阻塞DOM的解析 DOMcontentLoa ...
- DOMContentLoaded事件中使用异步
概述 我在之前的博文(Performance面板看js加载)中提到过,如果利用监听DOMContentLoaded事件的方式来加载js是不能优化加载的,不能够替代jquery中的ready方法,原因是 ...
- JS、CSS以及img对DOMContentLoaded事件的影响
最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- 深入理解Javascript封装DOMContentLoaded事件
最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加w ...
随机推荐
- ASA许可证
每台安装了BASE license的ASA平台都自带了一些隐藏的特性和功能.根据不同国际出口规则,有些ASA上安装的有可能是NO Payload Encryption license.这种许可证会绑定 ...
- docker 报错 docker: Error response from daemon: driver failed....iptables failed:
现象: [root@localhost test]# docker run --name postgres1 -e POSTGRES_PASSWORD=password -p : -d postgre ...
- STA之RC网
STA的主要工作是计算电路网络的延时,如今的电路网络还是由CMOS cell和net组成的,所以STA所要计算的延时仍是电容的充放电时间.等量子计算机普及的时候,如今的这一套理论都将随着科技的进步被丢 ...
- Angular NgModule(模块)
NgModule 模块是Angular种一个重要的点,因为Angular的基本构造块就是NgModule.NgModule 会把相关的代码收集到一些功能集中,形成功能单元.在使用Angular CL ...
- svn怎么修改用户名和密码
链接:https://blog.csdn.net/qq_36826506/article/details/80915431
- 获取自增长的id值
单个: <insert id="create" parameterType="com.dto.Cou" useGeneratedKeys="tr ...
- 源头质量 PageHelper(分页),导出功能
今天星期五,本来想直接关电脑走人的,但想想自己弄出来的,写写留个记忆吧.两个功能 导出 和 Mybatis的插件 PageHelper 分页 一,导出功能代码实现:这里是需要jar包的啊 <!- ...
- 运维数据同步工具:rsync,serync,csync,drbd,info(基于文件系统)
Rsync官方站点:http://rsync.samba.org 1. Rsync rsync是一款开源的实现数据全量与增量同步备份的工具 生产环境中使用的场景: 1:一般用于数据异地备份 2:用于 ...
- hadoop StandAlone环境搭建
1.准备一台服务器 192.168.100.100 2.提前安装jdk 3.hadoop运行服务 NameNode 192.168.100.100 SecondaryNameNo ...
- kubernetes的Ingress资源介绍
Ingress 的资源帮助信息介绍 [root@master ~]# kubectl explain ingress KIND: Ingress VERSION: extensions/v1beta1 ...