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執行'); }

 

 

我們來看一下控制台中輸出的結果： 
 

這里可以看出兩點不同： 
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