关于前端: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