document ready handler 执行之前都干了些什么

1、先聊聊什么是document ready handler ?
了解jQuery的开发者估计都写过这样的代码:
$(document).ready(function(){
// ......
});

这段代码就是jQuery中封装的ready()方法(document ready handler),其实原生js中没有ready方法,标准浏览器下,jQuery实际调用的是DOMContentLoaded事件,老版本的浏览器不支持这个事件,jQuery检测到浏览器不支持DOMContentLoaded事件,就会调用window.onload事件。

2、DOMContentLoaded 和 onload 的区别:

先说说window.onload事件什么时候触发:
onload事件是在页面DOM树生成完成后,并且所有的外部资源全部加载完成时触发。这里的外部资源包括图片、音/视频等,如果外部资源比较多,用户等待的时间就会很长,用户体验很差。有没有什么事件在DOM书渲染完成后就开始执行,这样用户等待的时间就会大大缩减。这就是下面介绍的另一个事件:DOMContentLoaded

DOMContentLoaded事件正如上面所说,当页面DOM树渲染完成后就开始执行,而不需要等待其它外部资源加载,这样会提高用户体验。这也是推荐大家使用的事件。。。

3、总结:A representation of the steps performed by browsers before the document-ready handler is executed

Page downloaded → HTML parsed → DOM created → Document ready fired → Handler executed

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容