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執行'); }$(function(){})$(function(){})$(document).ready(function(){})window.onload

 

 

咱們來看一下控制檯中輸出的結果： 
 

這裏能夠看出兩點不一樣： 
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