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/
歡迎分享與轉載。