如何通过JavaScript实现DOMContentLoaded事件的详细应用案例？

本文共计470个文字，预计阅读时间需要2分钟。

`DOMContentLoaded` 事件与页面加载相关，当文档加载完成且不需要等待样式表、图像和子框架的加载即可执行娱乐时，它会被触发。与 `window.onload` 事件相比，`DOMContentLoaded` 事件发生得更早，因为它不需要等待所有资源加载完成。简单来说：

- `DOMContentLoaded`：文档加载完毕，无需等待资源加载，即可触发。- `window.onload`：页面完全加载，包括所有资源（如图片、样式表等）后触发。

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。

参考文档：

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

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

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

到此这篇关于JavaScript DOMContentLoaded事件案例详解的文章就介绍到这了,更多相关JavaScript DOMContentLoaded事件内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！