转：获取WEB各阶段响应时间

转载地址：

https://blog.csdn.net/posonrick/article/details/82792607

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_API

web性能】Web performance 获取web各个阶段响应时间：DNS解析时间、TCP建立连接时间、首页白屏时间、dom渲染完成时间、页面onload时间等

准确地测量web应用程序的性能特性是使web应用程序更快的一个重要方面

那么我们怎么知道一个网站加载定的时间呢？

我们可以添加时间戳标记

下面的JavaScript显示了一个简单的尝试来度量完全加载页面所需的时间:

  1.  
    <html>
  2.  
    <head>
  3.  
    <title>stark wang</title>
  4.  
    <script type="text/javascript">
  5.  
    var start = new Date().getTime();
  6.  
    function onLoad() {
  7.  
    var now = new Date().getTime();
  8.  
    var latency = now - start;
  9.  
    alert("page loading time: " + latency);
  10.  
    }
  11.  
    </script>
  12.  
    </head>
  13.  
    <body onload="onLoad()">
  14.  
    <!- Main page body goes from here. -->
  15.  
    </body>
  16.  
    </html>

结果：

上面的脚本计算在执行头部的第一个JavaScript后加载页面所需的时间，但是它并没有给出从服务器获取页面所需的时间，或者页面的初始化生命周期。

PerformanceNavigationTiming接口

使用以下脚本得到更多信息

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>stark wang</title>
  6.  
    </head>
  7.  
    <script>
  8.  
    function showNavigationDetails() {
  9.  
    // 入口
  10.  
    const [entry] = performance.getEntriesByType("navigation");
  11.  
    // 在控制台可以看到很多参数
  12.  
    console.table(entry.toJSON());
  13.  
    }
  14.  
    </script>
  15.  
    <body onload="showNavigationDetails()">
  16.  
     
  17.  
    </body>
  18.  
    </html>


自己去测试
这个接口省去我们很多时间，不再需要获取时间戳了

处理模型


参数说明

  1.  
     
  2.  
    navigationStart 加载起始时间
  3.  
    redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0）
  4.  
    redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间。其他情况则返回0）
  5.  
    fetchStart 浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间
  6.  
    domainLookupStart 查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart
  7.  
    domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求，同上
  8.  
    connectStart 开始建立TCP请求的时间。如果请求是keep-alive，缓存等，则返回domainLookupEnd
  9.  
    (secureConnectionStart) 如果在进行TLS或SSL，则返回握手时间
  10.  
    connectEnd 完成TCP链接的时间。如果是keep-alive，缓存等，同connectStart
  11.  
    requestStart 发起请求的时间
  12.  
    responseStart 服务器开始响应的时间
  13.  
    domLoading 从图中看是开始渲染dom的时间，具体未知
  14.  
    domInteractive 未知
  15.  
    domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
  16.  
    domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
  17.  
    domComplete 从图中看是dom渲染完成时间，具体未知
  18.  
    loadEventStart 触发load的时间，如没有则返回0
  19.  
    loadEventEnd load事件执行完的时间，如没有则返回0
  20.  
    unloadEventStart unload事件触发的时间
  21.  
    unloadEventEnd unload事件执行完的时间

实战案例

这些参数已经非常详细，也很精准，稍作处理就可以得出我们需要的一些关键数字，如：

DNS解析时间： domainLookupEnd - domainLookupStart
TCP建立连接时间： connectEnd - connectStart
白屏时间： responseStart - navigationStart
dom渲染完成时间： domContentLoadedEventEnd - navigationStart
页面onload时间： loadEventEnd - navigationStart

  1.  
    let timing = performance.timing,
  2.  
    start = timing.navigationStart,
  3.  
    dnsTime = 0,
  4.  
    tcpTime = 0,
  5.  
    firstPaintTime = 0,
  6.  
    domRenderTime = 0,
  7.  
    loadTime = 0;
  8.  
     
  9.  
    dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
  10.  
    tcpTime = timing.connectEnd - timing.connectStart;
  11.  
    firstPaintTime = timing.responseStart - start;
  12.  
    domRenderTime = timing.domContentLoadedEventEnd - start;
  13.  
    loadTime = timing.loadEventEnd - start;
  14.  
     
  15.  
    console.log('DNS解析时间:', dnsTime , '\nTCP建立时间:', tcpTime, '\n首屏时间:', firstPaintTime,
  16.  
    '\ndom渲染完成时间:', domRenderTime, '\n页面onload时间:', loadTime);

结果：

 

 

兼容性：

 

posted @ 2020-10-07 17:46  by2018  阅读(611)  评论(0)  编辑  收藏  举报