$(function(){})与window。onload区别

通用的页面加载js有四种方式：

1.window.onload = function(){}; —-js 
2.$(window).load(function(){});——Jquery 
3.$(document).ready(function(){});–Jquery 
4.$(function(){});———————Jquery 

其中1和2为同一种，3和4为同一种
1、2表示：页面全部加载完成（引用文件，图片）在加载内部函数，且只能执行一个（当文件由多个onload或者load，只加载最后一个）。
3、4在window.onload执行前执行的，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

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

最近一直在研究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

在JavaScript中

window.onload = function(){ 
  alert(“text1”); 
}; 
1
2
3

等同于在jQuery中

$(window).load(function(){
    alert("text1");
});
1
2
3

他们都是用于当页面的所有元素，包括外部引用文件，图片等都加载完毕时运行函数内的alert函数。load方法只能执行一次，如果在js文件里写了多个，只能执行最后一个。（初学者常常在页面结构里对元素直接写行为函数，这样是很丑陋的，可以用选择器等，在js代码里对元素进行行为控制。）

在jQuery中

$(document).ready(function(){
    alert("text2");
});
1
2
3

等同于（简化写法）

$(function(){
    alert("text2");
});
1
2
3

他们都是用于当页面的标准DOM元素被解析成DOM树后就执行内部alert函数。这个函数是可以在js文件里多次编写的，对于多人共同编写的js就有很大的优势，因为所有行为函数都会执行到。而且$(document).ready()函数在HMTL结构加载完后就可以执行，不需要等大型文件加载或者不存在的连接等耗时工作完成才执行，效率高。

当然 也要根据项目需求来使用，比如有时候有些时候图片或者重要信息没出来，会对用户操作产生误导，或者需要等获取某些图片高宽数据后再执行的行为函数，就得使用window.onload了。