标签：style c class blog tar http
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/
欢迎分享与转载。
JS/CSS/IMG加载顺序关系之DOMContentLoaded事件,布布扣,bubuko.com
JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
标签：style c class blog tar http
原文地址：http://www.cnblogs.com/margo/p/3745301.html
