js DOMContentLoaded事件 JavaScript 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