“我正在参加「掘金·启航计划」”
事情是这样的，前几天有业务同事给我的同事王麻子反馈，网页白屏时间太长了，看看能怎么优化下，让页面快点打开。
王麻子很热心，上去就给各个路由添加了懒加载。然后还想再进一步拆下包，想让首屏依赖文件小一些。但是发现个问题，做完后效果不是很明显。
这到底是咋回事呢？不嫌事多的马工也看了看，简单定位了下问题所在。
在做性能优化的时候，不能盲目拆包，要搞清楚问题所在，我看了下，等待服务器响应时间就将近 3 秒，这问题也不在前端啊。
我一般会在 devtools -> NetWork -> waterfall 或 Performance 查看下加载了哪些文件，哪些文件下载过慢。分析问题前，先了解一些前置知识：
浏览器中请求时序分解
当在 devtools - NetWork 面板中， 鼠标悬浮在 Waterfall 列中的请求条目上时，会显示请求的时间分解预览：
它告诉了我们以下几个信息：
排队中：当满足以下条件时，浏览器会将请求加入队列：
* 存在更高优先级的请求。
* 对于此源，已经有六个 TCP 连接打开，这是限制条件。仅适用于 HTTP/1.0 和 HTTP/1.1。
* 浏览器正在磁盘缓存中暂时分配空间。
暂停：请求可能由于排队时的任何原因而暂停。
DNS 查询：浏览器正在解析请求的 IP 地址。
初始化连接：浏览器正在建立连接，包括 TCP 握手/重试和 SSL 协商。
proxy：浏览器正在与代理服务器协商请求。
发送请求：请求正在发送中。
ServiceWorker 准备：浏览器正在启动 service worker。
请求发送到 ServiceWorker：请求正在发送到服务工作线程。
等待（TTFB）：浏览器正在等待响应的第一个字节。TTFB 代表首字节时间（Time To First Byte）。此时间包括 1 个往返的延迟和服务器准备响应所花费的时间。
内容下载：浏览器正在接收响应，可以是直接从网络接收，也可以是从服务工作线程接收。该值是读取响应主体所花费的总时间。比预期值大可能表示网络较慢，或者浏览器正在执行其他工作导致延迟读取响应。
接收推送：浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。
读取推送：浏览器正在读取先前接收的本地数据。
有了上面的前置知识，就很容易定位问题了。
查看 NetWork 面板
这个图与当时的情况类似，简单演示下，我当时看了下，首页依赖的包没有几个，关键文件指标：
Waiting for server response 时间 大约 2s。
Content Download 时间3秒， 文件大小 100KB。
可以看出，问题基本不在前端，可能有一个有争议的点是 100KB 可能还是过大， 这个也可以根据业务再进行进一步的优化，但是我觉得这不是主要问题。要想从根本解决问题，还是得加带宽。再有就是和后端研究先为啥等待服务器响应时间这么长。
Performance 面板
再补充下 Performance 中的 NetWork 怎么看
分类
首先我们可以看到有很多横条，不同的颜色代表不同的文件：
- HTML: 蓝色
- CSS: 紫色
- JS: 黄色
- Images: 绿色
优先级
左上角有个小正方形，代表请求优先级，颜色越深，请求优先级越高。
各部分说明
在上面的图片中，可以看到一个条形图有四个部分组成，左横线，浅色部分，深色部分，右横线，它是 Network 面板的 Timing 选项卡中相同请求的表示。
左横线：是连接启动事件组之前的所有内容。换句话说，它是发送请求（Request Sent）之前的所有内容。
条形图的浅色部分：是请求发送（Request Sent）和等待（TTFB）的时间。
条形图的深色部分：是内容下载（Content Download）的时间。
右横线 实际上表示在主线程上等待的时间。这在"Timing"选项卡中没有体现。