背景

掂量页面性能的形式。

参数阐明

具体文字说明：

  • 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};