JavaScript DOMContentLoaded事件案例详解
DOMContentLoaded 事件
字面上看，它会在dom加载完成后触发。
与window.onload事件非常相似，但有一定区别：
- DOMContentLoaded 事件是在文档完全加载和解析之后触发；
- 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事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码，需要的朋友可以参考下。2011-05-05
javascript判断两个IP地址是否在同一个网段的实现思路
要判断两个IP地址是否在同一个网段，将它们的IP地址分别与子网掩码做与运算，得到的结果为网络号，具体实现如下，需要的朋友可以参考下2013-12-12
本文主要分享了javascript实现淡入淡出轮播切换功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
本文主要为大家介绍了微信小程序中常用的几个表单组件的使用方法，例如：button、CheckBox、input、form等，感兴趣的可以了解一下2022-03-03
本文主要介绍了原生js仿淘宝网商品放大镜效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇网页中的图片查看器viewjs使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了JavaScript和JQuery获取DIV值的方法,结合具体实例形式对比分析了javascript与jQuery获取页面div元素值的实现技巧,需要的朋友可以参考下2017-03-03
javascript Table 中2个列（TD）的交换实现代码
非常不错的用js控制talbe中td的位置的实现代码。2009-02-02
这篇文章主要介绍了利用Vconsole和Fillder进行移动端抓包调试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。2015-06-06
最新评论