网页加载各指标以及实现方式

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

常见的场景

1. 营销、编辑会问：怎么感觉页面打开这么慢？
2. 本地和测试环境好快，感觉正式的用户也会很快
3. 性能优化了，但又不知道优化了多少
4. 家里打开会卡，不知道其它地区用户会不会卡，卡什么地方
5. 测试没问题，用户反馈页面没反应
6. 页面出错了几天了，营销来投诉哪里报错了
7. 对于项目线上情况，糊里糊涂

监控的目的

1. 知道正式用户的真实情况
2. 了解项目的瓶颈
3. 获取得到用户的发生的错误
4. 主动跟进与优化项目
5. 保障项目线上正常运行

监控的指标

1、FPT（白屏时间）

1）能大致得出用户网络到服务器响应的时间

2）包含了DNS、TCP、Request等时间

2、DomReady

1）页面构建完Dom树，可以对页面进行操作的时候

2）包含 FPT 和 DomRender 时间

3、ResLoad(资源加载时间)

1）反应出用户加载页面同步资源时间（js\css\img）

2）从DomReady后开始算起

4、OnLoad(页面加载完毕时间)

1）页面最终全部内容和资源加载完毕

2）包括含全部的指标，从页面一开始白屏就算起

前端获取

1、浏览器API支持情况

  window.onload = function () {
    var performance = window.performance

    if (!performance) {
        // 当前浏览器不支持
        return
    }

    var t = performance.timing
}

2、常见指标计算方式

var times = {}

times.onload = t.loadEventStart - t.fetchStart
// Dom Ready
times.domready = t.domContentLoadedEventEnd - t.fetchStart
// [重要]解析Dom数结构的时间
times.domrender = t.domInteractive - t.responseEnd
// [重要]DNS查询时间
times.dns = t.domainLookupEnd - t.domainLookupStart
// [重要]读取页面第一个字节的时间
// TTFB即 Time To First Byte 的意思
times.ttfb = t.responseStart - t.requestStart
// [重要]内容加载完成的时间
times.request = t.responseEnd - t.responseStart
// 首次渲染时间（白屏时间）
times.ftp = t.responseEnd - fetchStart
// 页面同步资源加载耗时
times.res = t.loadEventStart - t.domContentLoadedEventEnd
// TCP建立连接完成握手的时间
times.tcp = t.connectEnd - t.connectStart

3、页面停留时间与上报

var startTime = 0,
    onloadTime = 0;

window.onload = function () {
    var t = window.performance.timing;

    onloadTime = t.loadEventStart - t.fetchStart;

    startTime = new Date()
}

window.onunload = function () {
    var stayTime = new Date() - startTime + onloadTime;

    stayTime = Math.floor(stayTime * 100)/100;
}

var url = 'xxx.163.com/params=1';
var formData = new FormData();

formData.append('params2', "2");
window.onunload = function() {
    if (navigator && navigator.sendBeacon) {
        navigator.sendBeacon(url, formData);
    }
}