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

 

最後的結論

1、CSS樣式表影響了圖片的載入速度，然而JS不會影響，如果想讓圖片儘快載入，就不要給圖片使用樣式，比如寬高採用標籤屬性即可。

2、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/

歡迎分享與轉載。