游戏陪玩系统源码前端性能监控方式
代码与工具
以 GA(Google Analytics) 为代表的代码监控和以 WebPageTest 为代表的工具监控
模拟与真实
合成监控(Synthetic Monitoring,SYN),真实用户监控(Real User Monitoring,RUM)
一个是模拟游戏陪玩系统源码场景和数据,一个是真实的用户场景
合成监控:
真实用户监控:
关键指标
- 白屏时间:从点击游戏陪玩系统源码图标后到页面开始有内容的时间;
- 首屏时间:从点击游戏陪玩系统源码图标后到首屏内容渲染完毕的时间;
- 用户可操作时间节点:domready触发节点,点击事件有反应;
- 总下载时间:window.onload的触发节点。
所有指标:
常规统计方案
白屏时间
是什么
白屏时间节点指的是从用户进入游戏陪玩系统源码(输入url、刷新、跳转等方式)的时刻开始计算,一直到页面有内容展示出来的时间节点。
这个过程包括dns查询、建立tcp连接、发送首个http请求(如果使用https还要介入TLS的验证时间)、返回html文档、html文档head解析完毕。
代码实现
在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点,在head最底部记录另一个时间点,两者的差值作为白屏时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏时间</title>
<script>
// 开始时间
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script>
// 白屏结束时间
window.firstPaint = Date.now()
</script>
</head>
<body>
<div>123</div>
</body>
</html>
白屏时间 = firstPaint - pageStartTime
缺点:
无法获取解析html文档之前的时间信息
首屏时间
是什么
首屏时间 = 白屏时间 + 首屏渲染时间
代码实现
(1)首屏模块标签标记法
由于游戏陪玩系统源码解析HTML是按照顺序解析的,当解析到某个元素的时候,觉得首屏完成了,就在此元素后面加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首屏时间</title>
<script>
// 开始时间
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
</head>
<body>
<div>123</div>
<div>456</div>
// 首屏可见内容
<script>
// 首屏结束时间
window.firstPaint = Date.now();
</script>
// 首屏不可见内容
<div class=" "></div>
</body>
</html>
首屏时间 = firstPaint - pageStartTime
(2)统计首屏内加载最慢的图片/iframe(更常用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首屏时间</title>
<script>
window.pageStartTime = Date.now()
</script>
</head>
<body>
<img src="https://lz5z.com/assets/img/google_atf.png" alt="img" onload="load()">
<img src="https://lz5z.com/assets/img/css3_gpu_speedup.png" alt="img" onload="load()">
<script>
function load () {
window.firstScreen = Date.now()
}
window.onload = function () {
// 首屏时间
console.log(window.firstScreen - window.pageStartTime)
}
</script>
</body>
</html>
缺点:使用场景受限
同样无法获取解析html文档之前的时间信息
这种方案比较适合首屏元素数量固定的游戏陪玩系统源码页面,比如移动端首屏不论屏幕大小都展示相同数量的内容,响应式得改变内容的字体、尺寸等。
但是对于首屏元素不固定的游戏陪玩系统源码页面,这种方案并不适用,最典型的就是PC端页面,不同屏幕尺寸下展示的首屏内容不同。上述方案便不适用于此场景。
可操作时间
用户可操作的时间节点即dom ready触发的时间,使用jquery可以通过$(document).ready()获取此数据。
// 原生JS实现dom ready
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
总下载时间
总下载时间即window.onload触发的时间节点。
window.performance
是什么
用来测量游戏陪玩系统源码网页和Web应用程序的性能api
属性介绍
memory字段代表JavaScript对内存的占用。
navigation字段统计的是一些网页导航相关的数据:
- redirectCount:重定向的数量(只读),但是这个接口有同源策略限制,即仅能检测同源的重定向;
- type 返回值应该是0,1,2 中的一个。分别对应三个枚举值: 0 : TYPE_NAVIGATE
(用户通过常规导航方式访问游戏陪玩系统源码页面,比如点一个链接,或者一般的get方式) 1 : TYPE_RELOAD
(用户通过刷新,包括JS调用刷新接口等方式访问页面) 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
最重要的是timing字段的统计数据,它包含了网络、解析等一系列的时间数据。
说明:
- startTime:有些游戏陪玩系统源码浏览器实现为navigationStart,代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com,在地址栏输入google.com并回车,浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationStart的值便是触发unload当前文档的时间节点。如果当前文档为空,则navigationStart的值等于fetchStart。
- redirectStart和redirectEnd:如果游戏陪玩系统源码页面是由redirect而来,则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点;
- unloadEventStart和unloadEventEnd:如果前一个文档和请求的文档是同一个域的,则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;
- fetchStart是指在游戏陪玩系统源码发起任何请求之前的时间值。在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存;
- domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果游戏陪玩系统源码没有进行DNS查询(比如使用了cache),则两者的值都等于fetchStart;
- connectStart和connectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket),则两者都等于domainLookupEnd;
- secureConnectionStart:可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0;
- requestStart代表游戏陪玩系统源码发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;
- responseStart和responseEnd分别代表游戏陪玩系统源码收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;
- domLoading代表游戏陪玩系统源码开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性,domLoading的值就等于readyState改变为loading的时间节点;
- domInteractive代表游戏陪玩系统源码解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady,它早于DOMReady触发,代表html文档解析完毕(即dom
tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点; - domContentLoadedEventStart:代表DOMContentLoaded事件触发的时间节点:
页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。 - domContentLoadedEventEnd:代表DOMContentLoaded事件完成的时间节点,此刻用户可以对页面进行操作,也就是jQuery中的domready时间;
- domComplete:html文档完全解析完毕的时间节点;
- loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点
相关时间计算
- DNS查询耗时 = domainLookupEnd - domainLookupStart
- TCP链接耗时 = connectEnd - connectStart
- request请求耗时 = responseEnd - responseStart
- 解析dom树耗时 = domComplete - domInteractive
- 白屏时间 = domloading - fetchStart
- domready可操作时间 = domContentLoadedEventEnd - fetchStart
- onload总下载时间 = loadEventEnd - fetchStart
静态资源的时间计算
widow.performance.getEntries(),用来统计游戏陪玩系统源码静态资源相关的时间信息
返回一个数组,数组的每个元素代表对应的静态资源的信息
属性介绍
- initiatorType资源属性,有img、css等
- duration请求花费的时间
- 其他的与上面的window.performance.timing的属性一样
以上便是“游戏陪玩系统源码前端性能监控方案详解”的全部内容,希望对大家有帮助。