【web性能】获取web各个阶段响应时间：服务器响应时间、首页白屏时间、dom渲染完成时间等

我就是我 2022-02-15 08:13 700阅读 0赞

【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>

## 结果： ##

![1460000012833870][]

> 上面的脚本计算在执行头部的第一个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>

![1460000012833871_w_1322_h_1134][]  
![1460000012833872][]

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

## 处理模型 ##

![1460000012833873_w_300_h_94][]  
![1460000012833874][]

## 参数说明 ##

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

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);

## 结果： ##

![1460000012833875_w_1356_h_710][]

## 兼容性： ##

![1460000012833876_w_2552_h_1112][]

[1460000012833870]: /images/20220215/460c5f9112b2418c9c454d3aa3410ab2.png
[1460000012833871_w_1322_h_1134]: /images/20220215/525bc32c1c15442497127e0d3cf3f877.png
[1460000012833872]: /images/20220215/3988501960bd4649ac8cc6d6a1a88f2d.png
[1460000012833873_w_300_h_94]: /images/20220215/c0c89dc967d74d2883a3ac3f47ec5ce5.png
[1460000012833874]: /images/20220215/cf3ba864c28940968e4523a1ef9b0f19.png
[1460000012833875_w_1356_h_710]: /images/20220215/f30ff0aa986d4dbeb40a60c9c87f6a60.png
[1460000012833876_w_2552_h_1112]: /images/20220215/6bf3d06577604fc396fa984f1fd0bfb9.png