domcontentloaded事件和laod事件区别

它们两个最基本的区别就是：在加载HTML文档时，domcontentloaded事件要先于load事件，但是在具体分析时，网上有很大一部分分析有错。请看下方：

DOM文档加载的步骤为：
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、DOM树构建完成。//DOMContentLoaded
5、加载图片等外部文件。
6、页面加载完毕。//load

其中第二条，运行到DOMContentLoaded这一步时，并不加载样式表文件，原因是查看MDN的解释:

    当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而无需等待样式表，图像和子框架完成加载。一个非常不同的事件load 应该仅用于检测完全加载的页面。

所以我们看第五步，到底说的图片等外部文件，这个等，等的谁？，在MDN上可以明显看出是样式表，图像和子框架，当然还包括flash。
需要注意的是，CSS会阻塞图片的加载，所以一般会先加载css样式表，然后加载图片。JS并不会阻塞图片加载。

domcontentloaded事件和laod事件区别相关推荐

IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件示例: <body> <div> <butt ...
你知道socket.io中connect事件和connection事件的区别吗?
server端的socket.io中有两个连接事件.一个是.on('connect'),一个是.on('connection'). 官网上没有对这两个事件的区别进行解释. 那么这两个事件有什么区别呢? ...
onchange事件与onpropertychange事件的区别
onchange事件与onpropertychange事件的区别 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次内容有可能还是相等的)且失去 ...
jQuery学习（一）—jQuery应用步骤以及ready事件和load事件的区别
jQuery应用步骤以及ready事件和load事件的区别一.jQuery应用步骤第一步:利用script标签的src属性引入jQuery文档第二步:创建一个script标签,在该script下 ...
【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...
php行为和事件是什么,Yii Framework框架中事件和行为的区别及应用实例分析
本文实例讲述了Yii Framework框架中事件和行为的区别及应用.分享给大家供大家参考,具体如下: 个人觉得,在 Yii 里面,最难以明白的就是事件(Event)和行为(behavior)了.这不 ...
事件冒泡 vs 事件捕获 vs 事件委托的区别
事件冒泡 vs 事件捕获 vs 事件委托本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
虚幻4蓝图脚本中，函数，事件，宏的区别
函数,事件,宏的区别语法上的区别执行引脚: 返回值延迟节点允许访问范围逻辑区别总结语法上的区别执行引脚: 调用函数和发射事件只能有一个执行引脚,而宏在调用的时候可以有很多执行引脚进入或 ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

domcontentloaded事件和laod事件区别

domcontentloaded事件和laod事件区别相关推荐

最新文章

热门文章