关于性能优化:性能优化各项指标计算方式

背景

掂量页面性能的形式。

参数阐明

具体文字说明：

• navigationStart 加载起始工夫
• redirectStart 重定向开始工夫（如果产生了 HTTP 重定向，每次重定向都和以后文档同域的话，就返回开始重定向的 fetchStart 的值。其余状况，则返回 0）
• redirectEnd 重定向完结工夫（如果产生了 HTTP 重定向，每次重定向都和以后文档同域的话，就返回最初一次重定向承受完数据的工夫。其余状况则返回 0）
• fetchStart 浏览器发动资源申请时，如果有缓存，则返回读取缓存的开始工夫
• domainLookupStart 查问 DNS 的开始工夫。如果申请没有发动 DNS 申请，如 keep-alive，缓存等，则返回 fetchStart
• domainLookupEnd 查问 DNS 的完结工夫。如果没有发动 DNS 申请，同上
• connectStart 开始建设 TCP 申请的工夫。如果申请是 keep-alive，缓存等，则返回 domainLookupEnd
• (secureConnectionStart) 如果在进行 TLS 或 SSL，则返回握手工夫
• connectEnd 实现 TCP 链接的工夫。如果是 keep-alive，缓存等，同 connectStart
• requestStart 发动申请的工夫
• responseStart 服务器开始响应的工夫
• domLoading 从图中看是开始渲染 dom 的工夫，具体未知
• domInteractive 未知
• domContentLoadedEventStart 开始触发 DomContentLoadedEvent 事件的工夫
• domContentLoadedEventEnd DomContentLoadedEvent 事件完结的工夫
• domComplete 从图中看是 dom 渲染实现工夫，具体未知
• loadEventStart 触发 load 的工夫，如没有则返回 0
• loadEventEnd load 事件执行完的工夫，如没有则返回 0
• unloadEventStart unload 事件触发的工夫
• unloadEventEnd unload 事件执行完的工夫

应用

DNS 解析工夫：domainLookupEnd – domainLookupStart
TCP 建设连接时间：connectEnd – connectStart
白屏工夫：responseStart – navigationStart
dom 渲染实现工夫：domContentLoadedEventEnd – navigationStart
页面 onload 工夫：loadEventEnd – navigationStart

后果

var timing = performance.timing;
var times = {
    redirect:timing.redirectEnd - timing.redirectStart,
    lookupDomain:timing.domainLookupEnd - timing.domainLookupStart,
    connect:timing.connectEnd - timing.connectStart,
    request:timing.responseEnd - timing.requestStart
};