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事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript+css实现单击颜色褪去效果...2007-08-08
Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家介绍Bootstrap入门书籍之（零）Bootstrap简介，需要的朋友参考下2016-02-02
这篇文章主要介绍了JavaScript中的标签语句用法,实例分析了标签语句的功能、定义及相关使用技巧,需要的朋友可以参考下2015-02-02
有时候我们需要用js设置文档的样式属性，下面就是一些方法与原理分析，大家可以看下，应该就没问题了。2009-04-04
这篇文章主要为大家详细介绍了Echarts实现单条折线可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了js实现继承的5种方式,具体分析了JavaScript对象冒充、call()方法方式、apply()方法方式、原型链方式及混合方式的具体使用技巧,需要的朋友可以参考下2015-12-12
最近通过Uniapp开发APP又一个非常实用的功能,这篇文章主要给大家介绍了关于uniapp退出关闭当前小程序或APP的简单实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了微信小程序实现左滑动删除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了JavaScript实现全选和全不选操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论