有一次面試被問到$.ready()的作用,答:當DOM加載完畢時觸發。
接著問$.ready()與window.onload的區別是什么?答:不知道...
再問$.ready()的實現原理是什么?答:不知道...
所以寫篇博客壓壓驚
$.ready()與window.onload的區別
- 加載時間不同
- window.onload要等到所有東西都加載完畢才開始執行
- $.ready()是等到DOM構建完成就開始執行
- 瀏覽器構造網頁的過程請看這篇文章的第一部分
- 可以出現的次數不同
- window.onload在一個網頁中只能出現一次,多次不會都執行
- $.ready()可以在一個網頁中多次出現,并順序執行
- 另外,jquery采用的是發布訂閱模式,這篇文章用了入門的例子說明了前端常用的設計模式
- 不是什么大區別,$.ready()的簡化寫法可以寫成$(),而window.onload沒有簡化寫法。
$.ready()的實現原理
具體的可以看這篇文章,代碼寫的很詳細
jquery ready方法實現原理 內部原理
$.ajax基于原生的DOMContentLoaded
,mdn中是這樣描述的
當初始HTML文檔被完全加載和解析完成之后,DOMContentLoaded 事件被觸發,而無需等待樣式表、圖像和子框架完成加載。另一個不同的事件 load
應該僅用于檢測一個完全加載的頁面。 在使用 DOMContentLoaded 更加合適的情況下使用 load
是一個非常流行的錯誤,所以要謹慎。