先看下执行代码:
$(function(){
console.log("jq");
})
$(function(){
console.log("jq1");
})
window.onload=function(){
console.log("js");
}
window.onload=function(){
console.log("js1");
}
控制台输出结果:
jq
jq1
js
两者的不同点:
1、$(function(){})不会被覆盖,而window.onload会被覆盖(window.onload整个文档只能有一个,而可以把$(function(){})理解为一个队列)
2、$(function(){})会在window.onload前面先执行,$(function(){})类似于js中的DOMContentLoaded,是等DOM加载完毕后,其他内容(如图片扥等)加载之前执行,而window.onload则是页面所有资源都加载完毕后执行
DOM文档加载结构:
1、解析HTML结构
2、加载外部脚本及样式文件
3、解析并执行脚本
4、构造HTML模型(DOM) $(function(){})执行
5、加载图片等资源
6、文档页面加载完毕 window.onload执行