【web性能】获取web各个阶段响应时间:服务器响应时间、首页白屏时间、dom渲染完成时间等
2023-09-27 14:29:06 时间
【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);
结果:
兼容性:
- 新浪微博
- 微信
相关文章
- HTTP响应状态码含义参考
- windows服务安装启动报错误1053:服务没有及时响应启动或控制请求
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- 相位响应说明
- 爬虫之数据提取响应内容的分类
- 《响应式Web图形设计》一13.4 多图像解决方案
- 《高性能响应式Web开发实战》一第2章 响应式中要面对的问题
- Http消息头中常用的请求头和响应头
- 【JavaWeb】Servlet的应用全面讲解(二)获取请求和进行响应
- Java中的微信支付(3):API V3对微信服务器响应进行签名验证
- 聊聊 Vue3.0 响应式数据那些事儿
- PySe-018-Requests 解决响应乱码
- 移除jboss响应中的中间件信息
- 【SSM直击大厂】第五章:SpringMVC数据响应
- sqlserver Timeout 时间已到。在操作完成之前超时时间已过或服务器未响应
- nodejs基础 用http模块 搭建一个简单的web服务器 响应JSON、html
- WEB前端大作业-儿童礼物礼品商城响应式网页模板(HTML JS CSS)
- WEB前端大作业-蓝色金融服务响应式网页模板.md
- 文件内容作为服务器的响应练习
- 分享几个响应式开发的代码小技巧
- 参数或变量中有语法错误。 服务器响应为: mail from address must be same as authorization user
- QCheckBox 的按钮响应
- Proxy + Reflect 实现 响应的数据变化