亲宝软件园·资讯

展开

js DOMContentLoaded事件 JavaScript DOMContentLoaded事件案例详解

akuibpt23191 人气:0
想了解JavaScript DOMContentLoaded事件案例详解的相关内容吗,akuibpt23191在本文为您仔细讲解js DOMContentLoaded事件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,DOMContentLoaded事件,js,DOMContentLoaded事件详解,下面大家一起来学习吧。

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

加载全部内容

相关教程
猜你喜欢
用户评论