欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS/CSS/IMG加载顺序关系之DOMContentLoaded事件_html/css_WEB-ITnose

程序员文章站 2022-04-10 21:54:36
...
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/

欢迎分享与转载。