原文链接

原由

近来打仗到了一个机能优化方面为我们供应精准数据的东西，Navigation Timing，本想从网上猎取他更细致的信息，但搜刮到的内容绝大部分都是外洋的文章，遂决议写一遍详细分析的文章。

之前测试页面加载的时候都是在相应的位置打Date.now()，经由过程盘算时候差来完成。如许的做法有许多弊病。

• 须要在许多处所增加分外的代码

• 纪录的时候不正确

• 测试完以后须要找到每个处所诠释or删除，轻易落下且贫苦

W3C Web Performance Working Group 引入了 Navigation Timing API 帮我们自动，精准的完成了机能测试的办理题目。

Navigation Timing API 用法

用法很简朴，在页面load完以后我们能够从performance.timing对象中拿到我们须要的一切数据。见下图：

Navigation Timing不仅帮我们省去了烦琐的手动办理的操纵，而且供应了之前我们没法猎取到的数据，比方DNS和TCP衔接所需的时候。

内里供应的详细事宜以下图：

参数申明

详细文字申明：

• 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事宜实行完的时候

注，从domLoading最先往下的参数chrome官网并未给出详细英文诠释，只是猜想，若有毛病，迎接改正。

附上官方链接

简朴用法

这些参数已异常细致，也很精准，稍作处置惩罚就能够得出我们须要的一些症结数字，如：

• DNS剖析时候： domainLookupEnd – domainLookupStart

• TCP竖立衔接时候： connectEnd – connectStart

• 白屏时候： responseStart – navigationStart

• dom衬着完成时候： domContentLoadedEventEnd – navigationStart

• 页面onload时候： loadEventEnd – navigationStart

demo以下：

let timing = performance.timing,
     start = timing.navigationStart,
     dnsTime = 0,
     tcpTime = 0,
     firstPaintTime = 0,
     domRenderTime = 0,
     loadTime = 0;

dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS剖析时候:', dnsTime , '\nTCP竖立时候:', tcpTime, '\n首屏时候:', firstPaintTime,
 '\ndom衬着完成时候:', domRenderTime, '\n页面onload时候:', loadTime);

结果以下：

兼容性

现在Navigation Timing已提高，绝大部分主流浏览器都已支撑

那末，最先优化你的app吧

3Fuyu