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
DOMContentLoaded 事件的更多相关文章
- DOMContentLoaded事件
今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...
- Window.onLoad 和 DOMContentLoaded事件的先后顺序
相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...
- 模拟DOMContentLoaded事件
window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- HTML5-常见的事件- DOMContentLoaded事件
一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则 ...
- HTML load事件和DOMCOntentLoaded事件
JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行” 普通script标签会阻塞DOM的解析 DOMcontentLoa ...
- DOMContentLoaded事件中使用异步
概述 我在之前的博文(Performance面板看js加载)中提到过,如果利用监听DOMContentLoaded事件的方式来加载js是不能优化加载的,不能够替代jquery中的ready方法,原因是 ...
- JS、CSS以及img对DOMContentLoaded事件的影响
最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- 深入理解Javascript封装DOMContentLoaded事件
最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加w ...
随机推荐
- css全站字体,中文英文不同,粗细统一
@font-face { font-family: vwfont; src: url(/shop-m/public/fonts/VWText-Regular.otf); } @font-face { ...
- 【PAT甲级】1110 Complete Binary Tree (25分)
题意: 输入一个正整数N(<=20),代表结点个数(0~N-1),接着输入N行每行包括每个结点的左右子结点,'-'表示无该子结点,输出是否是一颗完全二叉树,是的话输出最后一个子结点否则输出根节点 ...
- 从TCL欲成JDI股东看,面板行业进入“群架”时代
当下,屏幕早已成为第一入口.PC.智能手机.平板电脑.电视.家庭智能终端.智慧交通.智能穿戴设备.汽车中控大屏--种种设备都是以屏幕为最重要的视觉呈现方式,让人们在一个个奇幻世界中畅游.也正是因为屏幕 ...
- Python3问题TypeError: object() takes no parameters
1. Python中关键字变量和特殊函数,都是以__xxx__来表示的 初学Python的朋友,需要注意其中变量名中前后是有两个下划线(_)的,如果不注意,调用内部关键字变量和特殊函数时,将会出现错误 ...
- 安装和配置Linux系统虚拟机
1.打开虚拟机软件 2.点击创建新的虚拟机,选择典型(推荐)类型的配置. 3.点击稍后安装操作系统. 4.客户机操作系统选择Linux,版本选择CentOS 7 64位. 5.虚拟机名称可自行更改,位 ...
- 微信小程序前端坑
链接:https://www.cnblogs.com/showMagic/p/7677551.html
- java linux安装jdk,git, maven
jdk8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html mkdir ...
- JavaScirpt - 模块的写法
传送门 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 原始写法 function f1() { // do sth. ...
- Spring Boot FreeMarker 使用教程
FreeMarker 跟 Thymeleaf 一样,是一种模板引擎,他可以无缝兼容 FreeMarker 在 Spring Boot 开发者中仍然有着很高的地位. 本章重点内容 编写一个最简单的 Fr ...
- Qt连接mysql数据库遇到QMYSQL driver not loaded
本文件向各位博友分享一下我在Qt开发过程中,连接mysql数据库时遇到的问题,以及解决的方法,希望对遇到同样问题的博友有所帮助. 工程运行环境:vs2015+Qt5.8 在开发过程中,编写数据库连接函 ...