JS/CSS/IMG加載順序關係之DOMContentLoaded事件

DOMContentLoaded介紹

DOMContentLoaded事件的觸發條件是：

將會在「全部的DOM所有加載完畢而且JS加載執行後觸發」。

但若是「js是經過動態加載進來的話，是不會影響到DOMContentLoaded的觸發時間」

以下圖所示，藍色的線表明DOMContentLoaded開始觸發，但前提是JS已經加載完畢並執行了。

（僅僅是DOM 並非onload事件整個頁面所有加載完畢觸發，DOMContentLoaded比onload要早觸發 請區分開,onload爲紅線 表示頁面已經所有加載完畢）

 

IMG和CSS在DOMContentLoaded觸發前都作了些什麼？

上面說到在DOMContentLoaded觸發以前，JS已經執行完畢。

可是IMG和CSS呢？咱們看下圖：DOMContentLoaded事件觸發了，可是有的圖片被阻擋了。

阻擋也就意味着被瀏覽器進行了延遲加載，雖然圖片請求很早就發了出去。

可是瀏覽器認爲你的CSS沒有加載完畢，不肯定圖片的樣式到底如何，牽扯到重繪資源問題。

因而將在CSS加載完畢後加載圖片。（圖下沒有進行阻塞的圖片請求是由於沒有樣式名，考慮到CSS不會改變它，瀏覽器就不須要阻塞它）

關鍵點來了：雖然CSS樣式表會阻塞圖片的加載，可是：JS不會。

若是你的頁面沒有CSS樣式表，圖片將所有在第一時間進行加載，不會判斷你JS是否加載完畢，纔去加載圖片。

這個應該是和瀏覽器特性有關，我用的是firefox 29.01

 

最後的結論

一、CSS樣式表影響了圖片的加載速度，然而JS不會影響，若是想讓圖片儘快加載，就不要給圖片使用樣式，好比寬高採用標籤屬性便可。

二、JS的加載執行速度影響了DOMContentLoaded事件的觸發時間，若是想要儘快觸發DOMContentLoaded事件，就將次要的JS採用動態加載的方式加載吧。

參考資料：

jquery的ready函數是如何工做的？介紹了加載響應事件的區別。

http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html

JS、CSS以及img對DOMContentLoaded事件的影響（這篇文章使用的是chrome，我後來用firefox測試，把知識從新進行梳理了一下，在此感謝此文做者！）

http://www.alloyteam.com/2014/03/effect-js-css-and-img-event-of-domcontentloaded/

 

 

做者：Margo_test
出處：http://www.cnblogs.com/margo/

歡迎分享與轉載。