共计 5435 个字符，预计需要花费 14 分钟才能阅读完成。
所谓 web, 即使你我素未谋面，便知志趣相投；足不出户，亦知世界之大。
这节我们了解一下获取用户访问网页速度和 Web 应用程序的性能，那如何来获取这些数据呢？我们项目中使用 PerformanceTiming 接口来获取当前页面中与时间相关的信息。PerformanceTiming 可以通过只读属性 Performance.timing 获得实现该接口的一个对象。
我们先来看一张图，timing API 的提供了整个请求的各个阶段的时间信息
PerformanceTiming.navigationStart 是一个无符号 long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载 (unload) 结束时的 UNIX 时间戳。如果没有上一个文档，这个值会和 PerformanceTiming.fetchStart 相同。
PerformanceTiming.unloadEventStart 是一个无符号 long long 型的毫秒数，表征了 unload 事件抛出时的 UNIX 时间戳。如果没有上一个文档，or if the previous document, or one of the needed redirects, is not of the same origin, 这个值会返回 0.
PerformanceTiming.unloadEventEnd 是一个无符号 long long 型的毫秒数，表征了 unload 事件处理完成时的 UNIX 时间戳。如果没有上一个文档，or if the previous document, or one of the needed redirects, is not of the same origin, 这个值会返回 0.
PerformanceTiming.redirectStart 是一个无符号 long long 型的毫秒数，表征了第一个 HTTP 重定向开始时的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回 0.
PerformanceTiming.redirectEnd 是一个无符号 long long 型的毫秒数，表征了最后一个 HTTP 重定向完成时（也就是说是 HTTP 响应的最后一个比特直接被收到的时间）的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回 0.
PerformanceTiming.fetchStart 是一个无符号 long long 型的毫秒数，表征了浏览器准备好使用 HTTP 请求来获取 (fetch) 文档的 UNIX 时间戳。这个时间点会在检查任何应用缓存之前。
PerformanceTiming.domainLookupStart 是一个无符号 long long 型的毫秒数，表征了域名查询开始的 UNIX 时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart 一致。
PerformanceTiming.domainLookupEnd 是一个无符号 long long 型的毫秒数，表征了域名查询结束的 UNIX 时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart 一致。
PerformanceTiming.connectStart 是一个无符号 long long 型的毫秒数，返回 HTTP 请求开始向服务器发送时的 Unix 毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于 fetchStart 属性的值。
PerformanceTiming.connectEnd 是一个无符号 long long 型的毫秒数，返回浏览器与服务器之间的连接建立时的 Unix 毫秒时间戳。如果建立的是持久连接，则返回值等同于 fetchStart 属性的值。连接建立指的是所有握手和认证过程全部结束。
PerformanceTiming.secureConnectionStart 是一个无符号 long long 型的毫秒数，返回浏览器与服务器开始安全链接的握手时的 Unix 毫秒时间戳。如果当前网页不要求安全连接，则返回 0。
PerformanceTiming.requestStart 是一个无符号 long long 型的毫秒数，返回浏览器向服务器发出 HTTP 请求时（或开始读取本地缓存时）的 Unix 毫秒时间戳。
PerformanceTiming.responseStart 是一个无符号 long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的 Unix 毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。
PerformanceTiming.responseEnd 是一个无符号 long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前 HTTP 连接已经关闭，则返回关闭时）的 Unix 毫秒时间戳。
PerformanceTiming.domLoading 是一个无符号 long long 型的毫秒数，返回当前网页 DOM 结构开始解析时（即 Document.readyState 属性变为“loading”、相应的 readystatechange 事件触发时）的 Unix 毫秒时间戳。
PerformanceTiming.domInteractive 是一个无符号 long long 型的毫秒数，返回当前网页 DOM 结构结束解析、开始加载内嵌资源时（即 Document.readyState 属性变为“interactive”、相应的 readystatechange 事件触发时）的 Unix 毫秒时间戳。
PerformanceTiming.domContentLoadedEventStart 是一个无符号 long long 型的毫秒数，返回当解析器发送 DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的 Unix 毫秒时间戳。
PerformanceTiming.domContentLoadedEventEnd 是一个无符号 long long 型的毫秒数，返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的 Unix 毫秒时间戳。
PerformanceTiming.domComplete 是一个无符号 long long 型的毫秒数，返回当前文档解析完成，即 Document.readyState 变为 ‘complete’ 且相对应的 readystatechange 被触发时的 Unix 毫秒时间戳。
PerformanceTiming.loadEventStart 是一个无符号 long long 型的毫秒数，返回该文档下，load 事件被发送时的 Unix 毫秒时间戳。如果这个事件还未被发送，它的值将会是 0。
PerformanceTiming.loadEventEnd 是一个无符号 long long 型的毫秒数，返回当 load 事件结束，即加载事件完成时的 Unix 毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是 0.
重点来了！！！看了以上参数，我们想要的数据来源有了，现在要做的便是去整理这些数据，将他变成我们项目中使用的数据。我们将要收集的时间归为两类：
1. 区间阶段耗时
DNS 解析耗时
dns: timing.domainLookupEnd – timing.domainLookupStart
TCP 连接耗时
tcp: timing.connectEnd – timing.connectStart
SSL 安全连接耗时
ssl: timing.connectEnd – timing.secureConnectionStart
Time to First Byte（TTFB），网络请求耗时 TTFB 有多种计算方式，ARMS 以 Google Development 定义为准
ttfb: timing.responseStart – timing.requestStart
数据传输耗时
trans: timing.responseEnd – timing.responseStart
DOM 解析耗时
dom: timing.domInteractive – timing.responseEnd
资源加载耗时
res: timing.loadEventStart – timing.domContentLoadedEventEnd
2. 关键性能指标
首包时间
firstbyte: timing.responseStart – timing.domainLookupStart
First Paint Time, 首次渲染时间 / 白屏时间
fpt: timing.responseEnd – timing.fetchStart
Time to Interact，首次可交互时间
tti: timing.domInteractive – timing.fetchStart
HTML 加载完成时间，即 DOM Ready 时间
ready: timing.domContentLoadedEventEnd – timing.fetchStart
页面完全加载时间
load:timing.loadEventEnd – timing.fetchStart
现在这两部分数据有了，我们就可以将这些数据上传到我们后台服务上去了，是不是很简单呢，^_^。对于如何展示我们收集的数据，请前往（http://hubing.online:8083）瞅一眼哦。
不是很明白？那我再附上一些源码吧
// 监听 perf
let performanceTime = function () {
var timing = performance.timing;
var loadTime = timing.loadEventEnd – timing.navigationStart;// 过早获取时,loadEventEnd 有时会是 0
if (loadTime <= 0) {
// 未加载完，延迟 200ms 后继续 times 方法，直到成功
setTimeout(function () {
performanceTime();
}, 200);
return;
}
uploadUserData(1, {
// 1. 区间阶段耗时
// DNS 解析耗时
dns: formatTime(timing.domainLookupEnd – timing.domainLookupStart),
// TCP 连接耗时
tcp: formatTime(timing.connectEnd – timing.connectStart),
// SSL 安全连接耗时
ssl: formatTime(timing.connectEnd – timing.secureConnectionStart),
// Time to First Byte（TTFB），网络请求耗时 TTFB 有多种计算方式，ARMS 以 Google Development 定义为准
ttfb: formatTime(timing.responseStart – timing.requestStart),
// 数据传输耗时
trans: formatTime(timing.responseEnd – timing.responseStart),
// DOM 解析耗时
dom: formatTime(timing.domInteractive – timing.responseEnd),
// 资源加载耗时
res: formatTime(timing.loadEventStart – timing.domContentLoadedEventEnd),
// 2. 关键性能指标
// 首包时间
firstbyte: formatTime(timing.responseStart – timing.domainLookupStart),
// First Paint Time, 首次渲染时间 / 白屏时间
fpt: formatTime(timing.responseEnd – timing.fetchStart),
// Time to Interact，首次可交互时间
tti: formatTime(timing.domInteractive – timing.fetchStart),
// HTML 加载完成时间，即 DOM Ready 时间
ready: formatTime(timing.domContentLoadedEventEnd – timing.fetchStart),
// 页面完全加载时间
load: function () {
return formatTime(timing.loadEventEnd – timing.fetchStart);
}(),
navt: (function () {
let type = “”;
switch (performance.navigation.type) {
case 0:
type = ‘NAVIGATE’;
break;
case 1:
type = ‘RELOAD’;
break;
case 2:
type = ‘BACK_FORWARD’;
break;
case 255:
type = ‘RESERVED’;
break;
}
return type;
})()
});
}
window.addEventListener(“load”, function () {
performanceTime();
});
喜欢请点个赞呗
或者去 https://github.com/kisslove/w… Star 一下
或者打赏一下
再或者……
哈哈，想法有点多了。
