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