JQ的$(function(){})与window. onload的区别

版权声明：如果喜欢，就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/88392832

最近一直在研究jq的源码，书写jq的代码我们通常会包裹在一个

$(function(){})
函数中，
jq的
$(function(){})
也就是
$(document).ready(function(){})
的简写，与之对应的原生js的
window.onload
事件，这俩者之间到底有什么区别呢？
$(function () {
    console.log("ready执行");
});

$(function() {
    console.log("ready1执行");
});

window.onload = function () {
    console.log('load执行');
};
window.onload = function () {
    console.log('load1执行');
}

我们来看一下控制台中输出的结果： 

这里可以看出两点不同： 
1.$(function(){})不会被覆盖，而window.onload会被覆盖，个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。 
2. $(function(){})在window.onload执行前执行的，$(function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM文档加载步骤： 
1.解析HTML结构 
2.加载外部的脚本和样式文件 
3.解析并执行脚本代码 
4.执行$(function(){})内对应代码 
5.加载图片等二进制资源 
6.页面加载完毕，执行window.onload