Web Performance提供了可以通过的函数（performance 属性提供）测试当前网页或者 web应用的性能，获取更为精确的原始数据，以毫秒为单位。一般放在window.onload事件中读取各种数据，有些值必须在页面完全加载之后才能得出。
图示
API详解
navigationStart
表示从上一个文档卸载结束时的unix时间戳，如果没有上一个文档，这个值将和fetchStart 相等。
- redirectStart, redirectEnd
如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点。跳转且是同域名内部的重定向才算，否则值为0。
- fetchStart:浏览器准
- fetchStart
浏览器发起任何请求之前的时间值，发生在检查本地缓存之前，在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存
- domainLookupStart domainLookupEnd
分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用cache），则都等于fetchStart
- connectStart、connectEnd
分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如持久化连接webscoket），则两者都等于domainLookupEnd
- secureConnectionStart
可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0。该api位于connectStart、connectEnd之间。
- requestStart
代表浏览器发起请求的时间节点，请求的方式可以是服务器，缓存，本地资源。
- responseStart, responseEnd
分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻；
- -domLoading
代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点
- domInteractive
代表浏览器解析html文档的状态为interactive时的事件节点，即完成解析DOM树的时间，Document.readyState变为interactive，并将抛出readystatechange相关事件。此时只是DOM树解析完成，这时候并没有开始加载网页内的资源（外链css、js）。
- domContentLoadEventStart
代表domContentLoaded事件触发的时间节点：页面文档完全加载并解析完成之后，会触发DOMContentLoaded，Html文档不会等待样式文件，图片文件，自框架页面的加载（load事件可用来检测页面是否完全加载完毕）
- domContentLoadEventEnd
代表domContentLoaded事件完成的时间节点，此时用户可以对页面进行操作
- domComplete
- Html文档完全解析完成的时间节点
为什么使用Image对象.gif文件上报
- 防止跨域
只要能上报数据，无论是请求GIF文件还是请求其他普通文件(JS)或者是请求接口，服务器端其实并不关心具体的上报方式。
但是图片的src属性并不会跨域，并且同样可以发起请求
- 防止阻塞页面加载，影响用户体验
通常，创建资源节点后只有将对象注入到浏览器DOM树后，浏览器才会实际发送资源请求。反复操作DOM不仅会引发性能问题，而且载入js/css资源还会阻塞页面渲染，影响用户体验。
但是图片请求例外。构造图片打点不仅不用插入DOM，只要在js中new出Image对象就能发起请求，而且还没有阻塞问题，在没有js的浏览器环境中也能通过img标签正常打点，这是其他类型的资源请求所做不到的
- 相比PNG/JPG，GIF的体积最小
最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节。同样的响应，GIF可以比BMP节约41%的流量，比PNG节约35%的流量
上报数据封装
performance.js
/* eslint-disable no-console */ import { VueRouter } from 'vue-router/types/router'; import { BaseTrack } from './track'; export class Performance { // TODO 注意上报的单位 现在是毫秒 public static readonly timing = window.performance && window.performance.timing; //初始化 public static init() { if (!this.timing) { console.warn('当前浏览器不支持performance API'); return; } //页面资源加载完后，上报数据 window.addEventListener('load', () => { BaseTrack.track(this.getTimings()); }); } //自定义计算白屏时间 public static record(router?: VueRouter) { const setFPT = () => { if (window.performance && window.performance.now) { this.customFPT = window.performance.now(); } }; return { created: () => { if (router) { //如果是单页面应用，等路由加载完之后，记录时间 router.onReady(() => { setFPT(); }); } else { setFPT(); } }, }; } //封装上报数据 public static getTimings(): { [key in string]: number } { if (!this.timing) { console.warn('当前浏览器不支持performance API'); return {}; } return { redirect: this.getRedirectTime(), dns: this.getDnsTime(), tcp: this.getTcpTime(), ttfb: this.getTimeOfFirstByte(), req: this.getReqTime(), ppdt: this.getParsePureDomTime(), dclt: this.getDomContentLoadTime(), fpt: this.getFirstPaintTime(), load: this.getLoadTime(), }; } private static customFPT: number = 0; private static getRedirectTime() { // 重定向耗时 return Performance.timing.redirectEnd - Performance.timing.redirectStart; } private static getDnsTime() { // dns查询耗时 return Performance.timing.domainLookupEnd - Performance.timing.domainLookupStart; } private static getTcpTime() { // tcp连接耗时 return Performance.timing.connectEnd - Performance.timing.connectStart; } private static getTimeOfFirstByte() { // 读取页面第一个字节耗时 return Performance.timing.responseStart - Performance.timing.navigationStart; } private static getReqTime() { // request请求耗时 return Performance.timing.responseEnd - Performance.timing.responseStart; } private static getParsePureDomTime() { // 解析纯DOM树耗时, 不包含js css等资源的加载和执行 return Performance.timing.domInteractive - Performance.timing.domLoading; } private static getDomContentLoadTime() { // 页面资源加载耗时, 包含vue, js css等资源的加载和执行 return Performance.timing.domComplete - Performance.timing.domInteractive; } private static getFirstPaintTime() { // first paint time, 首次渲染时间, 即白屏时间 // getEntriesByName 浏览器兼容性不好，故有时需要自己去定义 return Math.round( (window.performance.getEntriesByName && window.performance.getEntriesByName('first-paint') && window.performance.getEntriesByName('first-paint')[0] && window.performance.getEntriesByName('first-paint')[0].startTime) || this.customFPT, ); } private static getLoadTime() { // 页面load总耗时 return Performance.timing.loadEventStart - Performance.timing.navigationStart; } private static toSeconds(time: number) {} }
上报
track.ts
/* eslint-disable no-console */ import queryString from 'query-string'; import { v4 as uuid } from 'uuid'; let image: HTMLImageElement | null; export class BaseTrack { public static track(params: { [key: string]: any }) { try { // if (process.env.NODE_ENV !== 'production') { // // 非生产环境不上报 // return; // } //封装上报数据参数 const qs = queryString.stringify({ timestamp: Date.now(), traceId: this.getTraceId(), url: location.href, ...params, }); //上报 this.reportByImg(qs); } catch (e) { console.error(e); } } private static serverUrl: string = 'https://open-demo-qiuku.cn-beijing.log.aliyuncs.com/logstores/qiuku-demo/track_ua.gif?APIVersion=0.6.0&'; private static reportByImg(qs: string, retryTimes: number = 3) { const retry = () => { image = null; retryTimes && this.reportByImg(qs, retryTimes - 1); }; return new Promise((resolve) => { try { image = new Image(); image.src = this.serverUrl + qs; //请求失败，再次请求，默认请求失败后请求最多三次 image.onerror = () => { retry(); }; } catch (e) { console.error(e); } }); } //获取追踪Id，标记是哪个用户 private static getTraceId() { try { const traceKey = 'qiuku_track_id'; let traceId = localStorage.getItem(traceKey); if (!traceId) { traceId = uuid(); localStorage.setItem(traceKey, traceId!); } return traceId; } catch (e) { return ''; } } }
main.ts
// import '@babel/polyfill'; import Vue from 'vue'; import App from './App.vue'; import './registerServiceWorker'; import router from './router'; import { Performance } from '../src/utils/performance'; Vue.config.productionTip = false; //初始化 Performance.init(); //自定义分析dom渲染的时间 Vue.directive('analysis', { inserted(el, options) { console.log(`${options.value} = ${Date.now() - window.performance.timing.navigationStart}`); } }); new Vue({ router, render: (h) => h(App), mixins: [Performance.record(router)], }).$mount('#app');
