HTML5 性能监控API - timing API

利用 HTML5 performance，可以对前端页面加载性能进行分析，如首屏加载性能这个重要的分析。

performanceTiming(performance.timing)对象的成员, 梳理如下几个关键性的节点：

navigationStart 浏览器完成卸载前一个文档的时间（也就是准备加载新页面的那个起始时间）。如果没有前一个文档，那么就返回timing.fetchStart的值。
fetchStart：发起获取当前文档的时间点，我的理解是浏览器收到发起页面请求的时间点；
domainLookupStart：返回浏览器开始DNS查询的时间，如果此请求没有DNS查询过程，如长连接、资源cache、甚至是本地资源等，那么就返回 fetchStart的值；
domainLookupEnd：返回浏览器结束DNS查询的时间，如果没有DNS查询过程，同上；
connectStart：浏览器向服务器请求文档，开始建立连接的时间，如果此连接是一个长连接，或者无需与服务器连接（命中缓存），则返回domainLookupEnd的值；
connectEnd：浏览器向服务器请求文档，建立连接成功的时间；
requestStart：开始请求文档的时间（注意没有requestEnd）;
responseStart：浏览器开始接收第一个字节数据的时间，数据可能来自于服务器、缓存、或本地资源；
unloadEventStart：卸载上一个文档开始的时间；
unloadEventEnd：卸载上一个文档结束的时间；
domLoading：浏览器把document.readyState设置为“loading”的时间点，开始构建dom树的时间点；
responseEnd：浏览器接收最后一个字节数据的时间，或连接被关闭的时间；
domInteractive：浏览器把document.readyState设置为“interactive”的时间点，DOM树创建结束；
domContentLoadedEventStart：文档发生DOMContentLoaded事件的时间；
domContentLoadedEventEnd：文档的DOMContentLoaded 事件结束的时间；
domComplete：浏览器把document.readyState设置为“complete”的时间点；
loadEventStart：文档触发load事件的时间；
loadEventEnd：文档出发load事件结束后的时间

有用的信息

通过这些节点的时间戳，我们可以计算出很多有用的信息,例如

DNS 查询耗时
TCP连接耗时
request请求耗时
解析dom树耗时
……

各项数据计算方式

准备新页面时间耗时
timing.fetchStart - timing.navigationStart
redirect 重定向耗时
timing.redirectEnd  - timing.redirectStart
Appcache 耗时
timing.domainLookupStart  - timing.fetchStart
unload 卸载之前网页耗时
timing.unloadEventEnd - timing.unloadEventStart
DNS 查询耗时
timing.domainLookupEnd - timing.domainLookupStart
TCP连接耗时
timing.connectEnd - timing.connectStart
request请求耗时
timing.responseEnd - timing.requestStart
请求完毕至DOM加载
timing.domInteractive - timing.responseEnd
解析dom树耗时
timing.domComplete - timing.domInteractive
load事件耗时
timing.loadEventEnd - timing.loadEventStart;
从开始至load总耗时
timing.loadEventEnd - timing.navigationStart

统计各项耗时数据

var times = function() {
    var timing = performance.timing;
    var loadTime = timing.loadEventEnd - timing.navigationStart;//过早获取时,loadEventEnd有时会是0
    if(loadTime <= 0) {
        setTimeout(function(){
            times();
        }, 200);
        return;
    }
    var readyStart = timing.fetchStart - timing.navigationStart;
    var redirectTime = timing.redirectEnd  - timing.redirectStart;
    var appcacheTime = timing.domainLookupStart  - timing.fetchStart;
    var unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
    var lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
    var connectTime = timing.connectEnd - timing.connectStart;
    var requestTime = timing.responseEnd - timing.requestStart;
    var initDomTreeTime = timing.domInteractive - timing.responseEnd;
    var domReadyTime = timing.domComplete - timing.domInteractive; //过早获取时,domComplete有时会是0
    var loadEventTime = timing.loadEventEnd - timing.loadEventStart;
    var allTimes = [
        { "描述": "准备新页面时间耗时", "时间(ms)": readyStart },
        { "描述": "redirect 重定向耗时", "时间(ms)": redirectTime },
        { "描述": "Appcache 耗时", "时间(ms)": appcacheTime },
        { "描述": "unload 前文档耗时", "时间(ms)": unloadEventTime },
        { "描述": "DNS 查询耗时", "时间(ms)": lookupDomainTime },
        { "描述": "TCP连接耗时", "时间(ms)": connectTime },
        { "描述": "request请求耗时", "时间(ms)": requestTime },
        { "描述": "请求完毕至DOM加载", "时间(ms)": initDomTreeTime },
        { "描述": "解释dom树耗时", "时间(ms)": domReadyTime },
        { "描述": "load事件耗时", "时间(ms)": loadEventTime },
        { "描述": "从开始至load总耗时", "时间(ms)": loadTime }
    ];
    console.table(allTimes);
}
window.onload = times;

参考资料

https://www.biaodianfu.com/html5-performance.html
https://developer.mozilla.org/en-US/docs/Web/API/Window/performance
http://www.xuanfengge.com/html5-performance-front-end-load-performance-of.html