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事件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
