【web性能】Web performance 获取web各个阶段响应时间：DNS解析时间、TCP建立连接时间、首页白屏时间、dom渲染完成时间、页面onload时间等
准确地测量web应用程序的性能特性是使web应用程序更快的一个重要方面
那么我们怎么知道一个网站加载定的时间呢？
我们可以添加时间戳标记
下面的JavaScript显示了一个简单的尝试来度量完全加载页面所需的时间:
<html><head><title>stark wang</title><script type="text/javascript">var start = new Date().getTime();function onLoad() {var now = new Date().getTime();var latency = now - start;alert("page loading time: " + latency);}</script></head><body onload="onLoad()"><!- Main page body goes from here. --></body></html>
结果：
上面的脚本计算在执行头部的第一个JavaScript后加载页面所需的时间，但是它并没有给出从服务器获取页面所需的时间，或者页面的初始化生命周期。
PerformanceNavigationTiming接口
使用以下脚本得到更多信息
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>stark wang</title></head><script>function showNavigationDetails() {// 入口const [entry] = performance.getEntriesByType("navigation");// 在控制台可以看到很多参数console.table(entry.toJSON());}</script><body onload="showNavigationDetails()"></body></html>
自己去测试
这个接口省去我们很多时间，不再需要获取时间戳了
处理模型
参数说明
navigationStart 加载起始时间redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0）redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间。其他情况则返回0）fetchStart 浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间domainLookupStart 查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStartdomainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求，同上connectStart 开始建立TCP请求的时间。如果请求是keep-alive，缓存等，则返回domainLookupEnd(secureConnectionStart) 如果在进行TLS或SSL，则返回握手时间connectEnd 完成TCP链接的时间。如果是keep-alive，缓存等，同connectStartrequestStart 发起请求的时间responseStart 服务器开始响应的时间domLoading 从图中看是开始渲染dom的时间，具体未知domInteractive 未知domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间domComplete 从图中看是dom渲染完成时间，具体未知loadEventStart 触发load的时间，如没有则返回0loadEventEnd load事件执行完的时间，如没有则返回0unloadEventStart unload事件触发的时间unloadEventEnd unload事件执行完的时间
实战案例
这些参数已经非常详细，也很精准，稍作处理就可以得出我们需要的一些关键数字，如：
DNS解析时间： domainLookupEnd - domainLookupStart
TCP建立连接时间： connectEnd - connectStart
白屏时间： responseStart - navigationStart
dom渲染完成时间： domContentLoadedEventEnd - navigationStart
页面onload时间： loadEventEnd - navigationStart
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);
结果：
兼容性：
新浪微博微信TwitterFacebook原文/a/1190000012833867
