JavaScript DOMContentLoaded事件案例详解
更新时间：2021年09月09日 08:41:41 作者：akuibpt23191
这篇文章主要介绍了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事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用TypeScript实现一个浏览器事件的集中管理,浏览器事件模型的主要优点是它可以使开发人员更加灵活地处理用户交互，并且可以通过事件委托等技术来提高性能，本文给大家讲解的非常详细，需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了微信小程序实现文字滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了详解微信小程序——自定义圆形进度条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
这篇文章主要介绍了javascript实现计算指定范围内的质数,涉及javascript数值计算与判断相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了JS中常用的输出方式(五种)的相关资料，非常不错具有参考借鉴价值,需要的朋友可以参考下2016-06-06
通过seajs实现JavaScript的模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突，文件依赖等问题，其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。下面我们来一起深入学习下吧2019-06-06
这篇文章主要介绍了JavaScript callback回调函数用法,结合实例形式分析了callback回调函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下2018-05-05
其实浏览器也自带了返回的功能，也就是说，自带了返回定位的功能，返回定位到具体位置有两种方法，下面通过场景分析给大家详细讲解，需要的的朋友参考下2016-12-12
这篇文章主要介绍了JS 实现请求调度器的方法，帮助大家更好的理解和学习使用js，感兴趣的朋友可以了解下2021-03-03
下面小编就为大家带来一篇通过构造函数实例化对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论