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事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Java解析xml文件和json转换的方法(DOM4j解析)

    Java解析xml文件和json转换的方法(DOM4j解析)

    Java解析xml的方法有四种: DOM解析 SAX解析 JDOM解析 DOM4J解析 本次主要介绍使用DOM4j进行解析: 这里我主要使用两种方式去解析: xml文件内容 <?xml version="1.0" encoding="utf-8"?> <books> <book id="1"> <name>金苹果</name> <info>锄禾日当午</info>

  • 详细聊聊JavaScript是如何影响DOM树构建的

    详细聊聊JavaScript是如何影响DOM树构建的

    目录 文档对象模型 (DOM) DOM 和 JavaScript DOM 树如何生成 解析 HTML 的三个阶段 详解 HTML 解析流程 JavaScript 是如何影响 DOM 生成的 解析过程中的优化 总结 文档对象模型 (DOM) 文档对象模型 (DOM) 会将 web 页面与到脚本或编程语言连接起来.DOM模型表示具有逻辑树的文档.树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects).DOM的方法(methods)允许以编程方式进行访问树,从而改变文档的结

  • javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

    一个小误区 JS中的contains 今天想要用JS判断集合中是否包含另一个集合. 发现,Contains并不能达到所要的效果,查找之后发现了问题 原来,js的contains方法用来查看dom元素的包含关系,并不是Java中数组的contains方法. 先看一下duyunchao同学分享的代码 $(document).ready(function() { var Arrays = ['11','22','33']; var Array ='11'; if(Arrays.indexOf(Arra

  • JavaScript 中的文档对象模型 DOM

    JavaScript 中的文档对象模型 DOM

    目录 1.什么是DOM 2.选择元素 3.getElementById() 4.querySelector() 5.querySelectorAll() 6.添加新元素 7.更改CSS样式 8.如何监听事件 1.什么是DOM DOM 文档对象模型,是 HTML 和 XML 文档的编程接口,用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects),允许从文档中创建.更改或删除元素,还可以向这些元素添加事件,使页面更加动态. DOM 将 HTML

  • JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • JavaScript DOMContentLoaded事件案例详解

    DOMContentLoaded 事件 字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之后触发: window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等: 下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述: 1.   请求得到html文档,根据文档请求更多的img,css及其它资源文件: 2.

  • JavaScript CollectGarbage函数案例详解

    首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectGarbage(); //--> </SCRIPT> CollectGarbage,是IE的一个特有属性,用

  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    目录 需求 解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码 需求 需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件)  项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上 解决方法 1.设置tooltip enterable: true, //允许

  • JavaScript的事件机制详解

    JavaScript的事件机制详解

    事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流.事件处理程序绑定方式.事件对象等. 如何理解事件? JavaScript与HTML之间的交互就是通过事件实现的. 事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间. 事件处理程序:又称事件侦听器,事件发生时执行的代码

  • SpringBoot如何监听redis Key变化事件案例详解

    SpringBoot如何监听redis Key变化事件案例详解

    目录 一 .功能概览 二.事件类型 三.配置 三.案例 代码 新增和修改都是set指令 删除 过期 总结 键空间通知(keyspace notification) 一 .功能概览 键空间通知使得客户端可以通过订阅频道或模式, 来接收那些以某种方式改动了 Redis key变化的事件. 所有修改key键的命令. 所有接收到 LPUSH key value [value …] 命令的键. db数据库中所有已过期的键. 事件通过 Redis 的订阅与发布功能(pub/sub)来进行分发, 因此所有支持

  • javascript计时器事件使用详解

    在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setTimeout()未来的某时执行代码 clearTimeout()取消setTimeout()setTimeout()语法 复制代码 代码如下: var t=setTimeout("javascript语句",毫秒) setTimeout() 方法会返回某个值.在上面的语句中,值被储存在名为 t 的变量中.假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它.setTimeout() 的第

  • JavaScript 文件加载与阻塞问题之性能优化案例详解

    JavaScript 文件加载与阻塞问题之性能优化案例详解

    上来先给一个问题:在书写html页面时,当你要从外部引入js文件时,script标签会放置在哪个位置呢,放置位置不同对页面加载有影响吗? 默认情况下,浏览器是同步加载 JavaScript 脚本:即渲染引擎遇到 script 标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器"卡死",出现短暂的空白,没有任何响应.这会造成很不好的用户体验,解决这个问题有两种方案:

  • Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用户界面.今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现.程序很简单,与传统的MVC三层架构不谋而合. 首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,

  • JavaScript 拖拉时间之drag案例详解

    目录 DragEvent 接口 DataTransfer 接口概述 DataTransfer 的实例属性 DataTransfer.dropEffect DataTransfer.effectAllowed DataTransfer.files DataTransfer.types DataTransfer.items DataTransfer 的实例方法 DataTransfer.setData() DataTransfer.getData() DataTransfer.clearData()

  • JavaScript事件概念详解(区分静态注册和动态注册)

    js中的事件 什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件 事件类型 鼠标单击:例如单击button.选中checkbox和radio等元素:鼠标进入.悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table的范围: 键盘按键:当按下按键或释放按键时: HTML事件:例如页面body被加载时:在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容: 突变事件:主要指文档底层元素发生改变时触发的事件,如DomSubtreeModified(DO

随机推荐