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

【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，缓存等，则返回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);

结果：

兼容性：

新浪微博
微信
Twitter
Facebook

原文https://segmentfault.com/a/1190000012833867

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

服务器显示屏出现白屏,远程服务器时出现白屏怎么解决
远程服务器时出现白屏怎么解决内容精选换一换远程登录裸金属服务器后,控制台出现如下异常现象:使用vim编辑退出后,可编辑区域剩下半个屏幕.输入字符长度超过80个时,当前行被覆盖.使用vim等文本编 ...
服务器系统显示白屏,服务器远程显示白屏
服务器远程显示白屏内容精选换一换远程登录服务器出现蓝屏或黑屏,可能是由于explorer.exe进程异常导致的桌面无法显示.这是由于Windows服务器的explorer.exe进程异常导致的. ...
服务器显示屏出现白屏,前端性能优化之白屏时间
定场诗曲木为直终必弯,养狼当犬看家难: 墨染鸬鹚黑不久,粉刷乌鸦白不天. 蜜饯黄莲终需苦,强摘瓜果不能甜: 好事总得善人做,哪有凡人做神仙. 前言该篇文章会为您分享在前端性能优化中非常重要的一环- ...
前端性能优化方法与实战05 指标采集：白屏、卡顿、网络环境指标采集方法
上一讲我们介绍了首屏时间的指标采集,这一讲我们来聊聊前端其他的性能指标采集,比如白屏.卡顿和网络环境. 你乘火车.地铁.飞机都走过安检吧?如果说首屏时间类似你过安检的时刻,那么,白屏时间就是你排队到安 ...
服务器显示屏出现白屏,win10开机白屏不显示桌面怎么办_网站服务器运行维护,win10,白屏,桌面...
win7如何使用自带录制视频软件?_网站服务器运行维护 win7使用自带录制视频软件的方法:首先打开运行窗口输入cmd:然后管理员界面中输入[psr.exe]或者psr回车确定打开,并在工具上点击开始 ...
Web性能优化：What? Why? How?
为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...
你不知道的 Web 性能优化 | 原力计划
作者 | 左右同学责编 | 屠敏出品 | CSDN 博客你遇到过打开一个网站需要10秒以上的吗?这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅.你会有什 ...
摸鱼前端的自检（六）你不知道的web性能优化
你不知道的web性能优化你遇到过打开一个网站需要10秒以上的吗,这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅.你会有什么反应?我猜想,大多数用户会关闭这个 ...
浅析微前端架构下的Web性能分析
我们都知道Web性能关乎用户体验,进一步影响用户留存.转化率,显然用户体验不友好,最终导致流失.可见Web页面性能对用户和企业而言,可谓举足轻重. 因此,对Web页面的性能分析相关性能优化,是开发者不 ...