补充：
最新，这个居然被遗弃了，发展真快。废弃之后变为性能矩阵了。
image.png

前置知识：

我们已知，可以使用 performance 对象获取常规性能指标。

MDN地址 https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/timing

timing的概念

思考输入了网址到页面渲染结束中间发生了什么？阅读下面这张图：

image.png

这个图是最完美的解释，同时还加了性能指标。

重定向 — 缓存 — DNS — TCP — Request — Response

请注意，接下来会接触大量知识概念，但是不需要特意关注，我们先掌握大致的环节。

相关指标

我们再浏览器中打印 performace.timing 可以看到下面的结果：

image.png
这表示本次页面的加载耗时。不同的属性有不同的含义，不同指标中间的时差表示了不同阶段的耗时。

具体属性看参考 https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming

好，就是下面这张图了，连线好累。
image.png

这些值也能反映出一些问题：

属性 作用 影响
DNS解析耗时 CDN工作是否正常 过长，CDN和DNS有问题
网络请求耗时 返回的同步数据 过长，响应缓慢
DOM解析耗时 渲染DOM、js渲染阻塞情况 过长，DOM不合理、js阻塞严重
内容传输耗时 网络是否通畅 过长，网络状况、运行商不好
资源加载耗时 文档下载时间 过长，文档体积过大
DOM渲染耗时 DOM解析完之后，资源加载完成的时间 过长，引用的外部资源过多
首次渲染耗时 浏览器白屏时间 过长，体验不好
首次可交互耗时 DOM树解析完成时间
首包耗时 从查找DNS到给浏览器返回第一个字节的时间，也就是DNS解析查找时间 过长，DNS解析问题
页面完全加载耗时 下载整个页面的总时间
SSL连接耗时 数据安全性、完整性建立
TCP连接耗时 建立连接

可视化读图

这里提供一个书签，请访问 http://kaaes.github.io/timing/ 获取到一个书签，我们一点击就会出现下面的图

漫谈Performance.timing - 图5

如果我们要上报数据，可以把 performance.timing.toJSON() 和当前的 location.href 上报。