jq中$(function(){})和js中window.onload区别

时间:2023-03-08 21:52:25

先看下执行代码:

$(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执行