脚本宝典收集整理的这篇文章主要介绍了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

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

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript DOMContentLoaded事件案例详解全部内容，希望文章能够帮你解决JavaScript DOMContentLoaded事件案例详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。