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. ASA许可证

    每台安装了BASE license的ASA平台都自带了一些隐藏的特性和功能.根据不同国际出口规则,有些ASA上安装的有可能是NO Payload Encryption license.这种许可证会绑定 ...

  2. docker 报错 docker: Error response from daemon: driver failed....iptables failed:

    现象: [root@localhost test]# docker run --name postgres1 -e POSTGRES_PASSWORD=password -p : -d postgre ...

  3. STA之RC网

    STA的主要工作是计算电路网络的延时,如今的电路网络还是由CMOS cell和net组成的,所以STA所要计算的延时仍是电容的充放电时间.等量子计算机普及的时候,如今的这一套理论都将随着科技的进步被丢 ...

  4. Angular NgModule(模块)

    NgModule 模块是Angular种一个重要的点,因为Angular的基本构造块就是NgModule.NgModule 会把相关的代码收集到一些功能集中,形成功能单元.在使用Angular CL ...

  5. svn怎么修改用户名和密码

    链接:https://blog.csdn.net/qq_36826506/article/details/80915431

  6. 获取自增长的id值

    单个: <insert id="create" parameterType="com.dto.Cou" useGeneratedKeys="tr ...

  7. 源头质量 PageHelper(分页),导出功能

    今天星期五,本来想直接关电脑走人的,但想想自己弄出来的,写写留个记忆吧.两个功能 导出 和 Mybatis的插件 PageHelper 分页 一,导出功能代码实现:这里是需要jar包的啊 <!- ...

  8. 运维数据同步工具:rsync,serync,csync,drbd,info(基于文件系统)

     Rsync官方站点:http://rsync.samba.org 1. Rsync rsync是一款开源的实现数据全量与增量同步备份的工具 生产环境中使用的场景: 1:一般用于数据异地备份 2:用于 ...

  9. hadoop StandAlone环境搭建

    1.准备一台服务器 192.168.100.100 2.提前安装jdk 3.hadoop运行服务 NameNode            192.168.100.100 SecondaryNameNo ...

  10. kubernetes的Ingress资源介绍

    Ingress 的资源帮助信息介绍 [root@master ~]# kubectl explain ingress KIND: Ingress VERSION: extensions/v1beta1 ...