前端性能优化，timeLine资源之间空白时间如何定位？

Question

刚接触一个项目的前端优化，在谷歌开发者工具上看timeLine，发现有两个资源中间有一段空白，如图，不知道什么导致的，如何定位&优化呢？

.]

Answer 1

这段时间是浏览器在处理代码，包括下面的可能性：

1. 解析css文件

2. 解析html

3. 生成 RenderObject 并渲染

4. 执行 js(async=true) 文件

简单来说，浏览器按顺序解析html过程中，遇到 link、script、img 等标签时才会去加载资源，题目中的这段空白就是“解析过程”

Answer 2

可以参考下，html执行顺序 https://segmentfault.com/a/11...

Answer 3

建议用chrome的performance工具分析下，一般这样的留白是代码的问题

Answer 4

ttl
performance 选项卡查看

Answer 5

我的天，你放图就不能放个完整的吗？这不明显前边有资源这段时间一直没加载完嘛。

Answer 6

需要确认下，红色方框内第一行是不是js文件？

Answer 7

问下楼主 timeline 在哪里？ 控制台怎么找不到了。