这是我参与「第四届青训营 」笔记创作活动的第15天
一、谷歌控制台
- network瀑布路waterfall 地球人都知道，network是查看网页加载资源，以及请求信息的地方。细心的观众就会发现，这里有个叫waterfall的地方，顾名思义，它叫瀑布流，首先我们可以很直观的看到每个请求的时长，点击每个色块之后，又可以请求时间具体花在了哪部分。当你了解了每个颜色以及各项指标的含义，你就可以分析出你网页中的一些网络请求问题。
颜色
瀑中有好几种颜色：浅灰，深灰，橙色，绿色，蓝色
浅灰：查询中
深灰：停滞，代理转发，请求发送
橙色：初始连接
绿色：等待中
蓝色：内容下载
各项指标
Queueing（浅灰） 浏览器将资源放入队列时间，比如：遇到更高优先级的请求或请求并发超过 6 了。
Stalled（深灰） 因放入队列时间而发生的停滞时间。
Proxy negotiation 与代理服务器协商时间。
DNS Lookup（深绿） DNS 解析时间，浏览器需要将域名转换成 IP。
Initial Connection（橙色） 在浏览器发送请求前，需要建立 HTTP 连接的时间。
SSL（紫色） 如果网站使用了 HTTPS，这个就是浏览器与服务器建立安全性连接的时间。
Request sent 请求发送的时间。
Waiting (TTFB)（绿色） 等待服务端返回数据的时间，这个时间受制于服务端处理性能。
Content Download（蓝色） 浏览器下载资源的时间，这个时间受制于文件大小和带宽。
#感官指标 既然是性能监控，那首先需要明确衡量指标。一般来说，业界认可的常用感官上的指标有：
首次绘制（FP）时间：对于应用页面，用户在视觉上首次出现不同于跳转之前的内容时间点，或者说是页面发生第一次绘制的时间点。 首次有内容绘制（FCP）时间：指浏览器完成渲染 DOM 中第一个内容的时间点，可能是文本、图像或者其他任何元素，此时用户应该在视觉上有直观的感受。 首次有意义绘制（FMP）时间：指页面关键元素渲染时间。这个概念并没有标准化定义，因为关键元素可以由开发者自行定义——究竟什么是“有意义”的内容，只有开发者或者产品经理自己了解。 首屏时间：对于所有网页应用，这是一个非常重要的指标。用大白话来说，就是进入页面之后，应用渲染完整个手机屏幕（未滚动之前）内容的时间。需要注意的是，业界对于这个指标其实同样并没有确切的定论，比如这个时间是否包含手机屏幕内图片的渲染完成时间。 用户可交互时间：顾名思义，也就是用户可以与应用进行交互的时间。一般来讲，我们认为是 domready 的时间，因为我们通常会在这时候绑定事件操作。如果页面中涉及交互的脚本没有下载完成，那么当然没有到达所谓的用户可交互时间。
Performance API
提到性能优化指标就不得不说 Performance API，这个 API 是 HTML5 新增的特性。过去我们要统计脚本的运行时间，可能会使用 Date.getTime() 去获取对应的时间；如果要获取白屏时间是在 head 末尾插入一段获取时间戳的代码，然后用这个时间戳减去开始接收数据的那个时间戳，得出的结果为白屏时间。这样的方法无疑是笨重的，而且获取的时间无法更精确(只能到ms级别)，而且一些后台比较关注的时间根本无法获取。W3C 为了解决这个问题，在 HTML5 推出的时候，新增了这个 API 。
performance包括了五个属性，其中timing是需要重点关注的，timing是一个map数据结构，其中key值是性能优化指标，value值是对应的时间戳。其中这些时间戳与页面整个加载过程中的关键节点是有着一一对应的关系，这里通过谷歌开发者网站的一张图来说明：
