performance对象来获取网站加载时间轴

做性能分析的时候使用了 window.performance Api 来获取加载数据，后面去修改的时候又不确定各个字段表示的时间点，整理记录下各个字段和时间点关系

performance.timing

接口包含了当前页面的加载时间，时间值都为触发时机的时间戳或者没有就为0

和 PerformanceResourceTiming 重复的时间数据在下面统一整理，这里先介绍独有的一些参数

详细说明：

navigationStart - 上一个文档卸载(unload)结束时的时间戳，没有就为0
unloadEventStart - 上一个文档unload事件抛出时的时间戳，没有就为0
unloadEventEnd - 上一个文档unload事件处理完的时间戳，没有就为0
redirectStart - 第一个HTTP重定向开始时的时间戳，如果没有重定向，或者重定向中的一个不同源，这个值会返回0
redirectEnd - 最后一个HTTP重定向完成时时间戳，其它同上
fetchStart - 浏览器准备好获取文档的时间戳，类似PerformanceResourceTiming，只是这里是时间戳
… 中间字段类似下面PerformanceResourceTiming，只是取值的差异
domLoading - DOM结构开始解析时时间戳，document.readyState = loading
domInteractive - DOM结构结束解析时间戳，开始解析待执行脚本 document.readyState = interactive
domContentLoadedEventStart - 所有需要被执行的脚本已经被解析完成等待执行时的时间戳。返回当解析器发送DOMContentLoaded事件，就是常说的ready
domContentLoadedEventEnd - DOMContentLoaded事件执行完毕的时间戳
domComplete - 完成文档完整解析的时间，document.readyState = complete
loadEventStart - load 事件发送时的时间戳
loadEventEnd - load 事件执行完时的时间戳

Code 演示

window.onload = function() {
    setTimeout(()=> {
        const { timing } = window.performance;
        const result = [{
            name: '完整加载时间',
            value: timing.loadEventEnd - timing.navigationStart
        },{
            name: '旧页面卸载+重定向',
            value: timing.fetchStart - timing.navigationStart
        },{
            name: 'DNS查询',
            value: timing.domainLookupEnd - timing.domainLookupStart
        },{
            name: '建立连接 + ssl认证',
            value: timing.connectEnd - timing.connectStart
        },{
            name: 'DomReady 包含图片等资源加载',
            value: timing.domComplete - timing.responseEnd
        },{
            name: 'Dom结构下载时间',
            value: timing.responseEnd - timing.requestStart
        },{
            name: 'TTFB 发起请求到第一个字节',
            value: timing.responseStart - timing.requestStart
        },{
            name: 'Ready',
            value: timing.domContentLoadedEventEnd - timing.fetchStart
        },{
            name: 'Load',
            value: timing.domComplete - timing.fetchStart
        }];
        
        result.forEach(item => {
            console.log(`${item.name}: ${item.value}`);    
        });
    }, 500);
};

performance.getEntries()

检索和分析有关加载应用程序资源的详细网络计时数据, 应用程序可以使用timing指标来确定获取特定资源所需的时长度，例如XMLHttpRequest，SVG，image或script。

getEntriesByName()，getEntriesByType() 类似

关键时间字段说明

domainLookupStart - dns解析开始相对时间戳
domainLookupEnd - dns解析结束相对时间戳
connectStart - 开始建立与服务器的连接之前相对时间戳
secureConnectionStart - 紧接在浏览器启动握手过程之前，以保护当前连接
connectEnd - 完成与服务器的连接相对时间戳
requestStart - 紧接在浏览器开始从服务器请求资源之前
responseStart - 浏览器收到服务器响应的第一个字节
responseEnd - 浏览器收到资源的最后一个字节之后或紧接在传输连接关闭之前，以先到者为准。

另外也可以获取页面 FP FCP 的时间

过程图如下：
图片来自：http://www.alloyteam.com/2015/09/explore-performance/
PerformanceResourceTiming

通过getEntries绘制 - Network资源加载图

在各个时间段之间可能出现等待的时间，比如在network 中的 Queueing Stalled
部分值可能在缓存或者复用的情况下为0

window.onload = function() {
    setTimeout(()=> {
        const performanceEntry = window.performance.getEntriesByType('resource');
        const item = performanceEntry[3];
        const result = [{
                name: '资源url',
                value: item.name
            }, {
                name: '资源重定向',
                value: item.fetchStart - item.startTime
            },{
                name: '域名解析之前的等待时间',
                value: item.domainLookupStart - item.fetchStart
            },{
                name: '域名解析时间',
                value: item.domainLookupEnd - item.domainLookupStart
            },{
                name: '域名解析之后的等待时间',
                value: item.connectStart - item.domainLookupEnd
            },{
                name: '建立连接的时间（包含ssl验证）',
                value: `${item.connectEnd - item.connectStart}，SSL：${item.secureConnectionStart === 0 ? 0 : item.connectEnd - item.secureConnectionStart}`
            },{
                name: '连接后和请求之前的停滞或等待时间',
                value: item.requestStart - item.connectEnd
            },{
                name: 'TTFB时间',
                value: item.responseStart - item.requestStart
            },{
                name: '下载时间',
                value: item.responseEnd - (item.responseStart || item.requestStart || item.connectEnd || item.fetchStart)
            },{
                name: '总时间',
                value: item.duration
            }];
            
            result.forEach(item => {
                console.log(`${item.name}: ${item.value}`);    
            });
    }, 500);
};