JS、CSS以及img对DOMContentLoaded事件的影响(3)

非常令人惊讶，在有JS而没有CSS的页面中，img居然能够在收到数据后就立刻开始解码、绘图（paint)，也就是说，JS并没有阻塞img的展现！这跟我们以前理解的JS会阻塞img资源的传统观念不太一样，看来Chrome对img的加载和展现做了新的优化。

我们常用的jQuery的 $(document).ready() 方法，就是对DOMContentLoaded事件的监听（当然，其内部还会通过模拟DOMContentLoaded事件和监听onload事件来提供降级方案）。通常推荐在DOMContentLoaded事件触发的时候为DOM元素注册事件。所以尽快的让DOMContentLoaded事件触发，就意味着能够尽快让页面可交互：

减小CSS文件体积，把单个CSS文件分成几个文件以并行加载，减少CSS对JS的阻塞时间

次要的JS文件，通过动态插入script标签来加载（动态插入的script标签不阻塞DOMContentLoaded事件的触发）

CSS中使用的精灵图，可以利用对img的预加载，放在html中跟CSS文件一起加载

在做实验的过程中，感觉Chrome开发者工具的Timeline面板非常强大，浏览器的一举一动都记录下来。以前我们前端开发要想理解、探索浏览器的内部行为，或者摸着石头过河的做黑盒测试，或者事倍功半的研究浏览器源码，唯一高效点的做法就是学习别人的研究经验，看老外的文章，但浏览器的发展日新月异（比如这次实验发现的JS不阻塞img的展现），别人的经验始终不是最新、最适合的，关键是要结合自己的业务、需求场景，有针对性的做分析和优化。

PS.
以上测试环境为windows/chrome，并用Fiddler模拟慢速网络