开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第27天，点击查看活动详情

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');

深入分析window.performance以及上报收集到数据（前端性能监控）

API详解

为什么使用Image对象.gif文件上报

上报数据封装

上报