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

zoukankan html css js c++ java

转：获取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()">
17. </body>
18. </html>
自己去测试
这个接口省去我们很多时间，不再需要获取时间戳了

 处理模型

 参数说明
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;
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;
15. console.log('DNS解析时间:', dnsTime , ' TCP建立时间:', tcpTime, ' 首屏时间:', firstPaintTime,
16. ' dom渲染完成时间:', domRenderTime, ' 页面onload时间:', loadTime);
结果：

兼容性：
查看全文

相关阅读:
201521123065《java程序设计》第14周学习总结
 201521123065《java程序设计》第13周学习总结
 201521123065《java程序设计》第12周学习总结
 选择器
 浮动布局
 定位布局—position
软工个人总结
 个人作业4——alpha阶段个人小结
 软件工程个人作业3
结队编程

原文地址：https://www.cnblogs.com/beiyue/p/13778190.html

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

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

结果：

PerformanceNavigationTiming接口

处理模型

参数说明

实战案例

结果：

兼容性：