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

jq的$(function(){})与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执行');
}

执行结果:

ready执行

ready1执行

load1执行

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

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

 

posted @ 2017-11-21 15:25  sugerxiaoxiao  阅读(163)  评论(0编辑  收藏  举报