关于前端:js和css影响加载时间的分析

一、问题

有敌人发了个图，如下所示：

就是js放在css之前和之后是否会阻塞页面的问题。

初步来看，js在css之后必定会阻塞的，因为js是会先解释和执行，而后再渲染上面的节点。
但右侧会不会阻塞？个别很少把js写到css下面，所以比拟少思考这种状况。但从浏览器渲染角度来剖析，js是会阻塞上面的css加载以及节点渲染的。
但截图却说是失常，所以只能写个demo验证下了。

截图来自WebView性能、体验剖析与优化

二、验证

1、js放在css前面。DOM加载工夫是5.11s，load的工夫是5.14s

2、js放在css后面。DOM加载工夫是2.40s，load的工夫是3.40s

3、没有js。DOM加载工夫是641ms，load的工夫是3.35s

4、论断

截图是正确的，就是js在css后面，DOM的加载工夫很显著比js在css前面的少。

三、为什么？

因为浏览器加载css的时候不会解释js，但在解释js的时候，会并发加载css。
至于进一步的为什么，就有待钻研了。

四、其余

1、那篇文章中提到通常状况下，CSS不会阻塞HTML的解析，这个有误导。

css的加载尽管不会影响DOM加载的工夫，但会影响HTML的渲染。
正如下面没有js的demo，DOM的加载工夫是631ms，但页面的123显示进去是要等css加载实现。

2、浏览器渲染步骤

1. 加载解析HTML，构建DOM Tree
2. 加载并解析CSS，构建CSSOM Tree
3. 联合这两棵树，构建Render Tree
4. 最好绘制，再展现进去
   

3、CSS 是阻塞渲染的资源。须要将它尽早、尽快地下载到客户端，以便缩短首次渲染的工夫。

可参考：

1. https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
2. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=zh-cn
3. https://juejin.im/entry/58a6957d128fe10064768930