document.ready和onload的區別為:加載程度不同、執行次數不同、執行速度不同。
一、加載程度不同
1.document.ready:在DOM加載完成后就可以可以對DOM進行操作。一般情況一個頁面響應加載的順序是,域名解析-加載html-加載js和css-加載圖片等其他信息。那么Dom Ready應該在“加載js和css”和“加載圖片等其他信息”之間,就可以操作Dom了。
2.onload:在document文檔加載完成后就可以可以對DOM進行操作,document文檔包括了加載圖片等其他信息。那么Dom Load就是在頁面響應加載的順序中的“加載圖片等其他信息”之后,就可以操作Dom了。
二、執行次數不同
1.document.ready:document.ready可以寫多個.ready,可以執行多次,第N次都不會被上一次覆蓋。
2.onload:onload只能執行一次,如果有多個,那么第一次的執行會被覆蓋。
三、執行速度不同
1.document.ready:onload除了要等待DOM被創建還要等到包括大型圖片、音頻、視頻在內的所有外部資源都完全加載。如果加載圖片和媒體內容花費了大量時間,用戶就會感受到定義在onload事件上的代碼在執行時有明顯的延遲。
2.onload:document.ready函數只需對 DOM 樹的等待,而無需對圖像或外部資源加載的等待,從而執行起來更快。