菜鸟学前端

看前端好多js都是这个开头的，不知道是干啥的，一番百度后记录一下。

作用

JQuery 的 $(function(){}) 就是 $(document).ready(function(){}) 的简写。
后面这个我见过，和它类似的JavaScript是 window.onload 事件。

相比之下

• window.onload 事件重复声明会被后者覆盖。
• $(function(){}) 事件可以重复声明，每个独立有效，执行顺序和声明顺序一致。

其实仔细想想也就可以理解，
window.onload 是每次将 window 的 unload 属性进行重新赋值。
而 $(document).ready(function(){}) 则是将方法传入，大概是做了类似的队列操作。这个我没找源码确认，大概是猜的。。。

$(function () {
    console.log('ready');
});
 
$(function() {
    console.log('ready next');
});
 
window.onload = function () {
    console.log('onload');
};
window.onload = function () {
    console.log('onload next');
}

// console  print
ready
ready next
onload next

关于执行时机

调来调去搞了好多次尝试。

$(function(){}) 大约在 DOM 加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。
而 window.onload 会在页面资源全部加载完毕后才会执行。

DOM 文档加载步骤

• 解析 HTML 结构
• 加载外部的脚本和样式文件
• 解析并执行脚本代码
• 执行 $(function(){}) 内对应代码
• 加载图片等二进制资源
• 页面加载完毕，执行 window.onload

参考

以上很多内容都是百度来的，别问，问就百度。我就是记一下，方便自己学。
有错的话，感谢大家能给个指导。