16.window.onload DomContentLoaded的区别

636 阅读1分钟

一、何时触发这两个事件?

1、当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。

2、当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash,iframe子框架。

二、为什么要区分?

开发中我们经常需要给一些元素的事件绑定处理函数。但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的。这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数。

当然DOMContentLoaded机制更加合理,因为我们可以容忍图片,flash延迟加载,却不可以容忍看见内容后页面不可交互。

这里又要牵扯到页面加载渲染的原理了:

1、加载样式表会阻塞外链脚本的执行

Pasted Graphic 16.png

www.cnblogs.com/caizhenbo/p…

Pasted Graphic 17.png

Pasted Graphic 18.png

Pasted Graphic 19.png