当前位置: 首页 > Web前端 > HTML

使用PerformanceTiming检测页面性能

时间:2023-04-02 17:26:00 HTML

window.performance.timing属性navigationStart当前浏览器窗口上一个网页关闭时unload事件发生的Unix毫秒时间戳。如果没有之前的网页,则等于fetchStart属性。unloadEventStart如果上一个网页和当前网页属于同一个域名,返回上一个网页unload事件发生时的Unix毫秒时间戳。如果没有上一个网页,或者上一个网页跳转不在同一个域名下,则返回值为0;unloadEventEnd如果上一个网页和当前网页属于同一个域名,则返回上一个网页Unix毫秒时间戳的unload事件回调函数结束。如果没有上一个网页,或者上一个网页跳转不在同一个域名下,则返回值为0。redirectStart返回第一次HTTP重定向开始时的Unix毫秒时间戳。如果没有跳转,或者不是同域名内的跳转,则返回值为0。redirectEnd返回最后一次HTTP重定向结束时的Unix毫秒时间戳(即接受重定向响应的最后一个字节时).如果没有跳转,或者不是同域名内的跳转,则返回值为0。fetchStart返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件发生在页面查询本地缓存之前。domainLookupStart返回域查找开始时的Unix毫秒时间戳。如果使用持久连接,或者从本地缓存中获取信息,则返回值等于fetchStart属性的值。domainLookupEnd返回域查找结束时的Unix毫秒时间戳。如果使用持久连接,或者从本地缓存中获取信息,则返回值等于fetchStart属性的值。connectStart返回HTTP请求开始发送到服务器时的Unix毫秒时间戳。如果使用持久连接,则返回值等于fetchStart属性的值。connectEnd在浏览器和服务器之间建立连接时返回Unix毫秒时间戳。如果建立了持久连接,则返回值等于fetchStart属性的值。连接建立是指所有握手和认证过程结束。secureConnectionStart返回浏览器和服务器开始安全链接握手时的Unix毫秒时间戳。如果当前网页不需要安全连接,则返回0。当浏览器向服务器发出HTTP请求(或开始读取本地缓存)时,requestStart返回Unix毫秒时间戳。responseStart返回浏览器从服务器接收到最后一个字节(或从本地缓存中读取)时的Unix毫秒时间戳(如果HTTP连接在此之前已关闭,则返回关闭时间)domLoading返回DOM加载的时间当Document.readyState属性更改为“loading”并触发相应的readystatechange事件时,当前网页的结构开始解析Unix毫秒时间戳。domInteractive返回当前网页DOM结构解析结束,嵌入资源开始加载时(即Document.readyState属性变为“interactive”,相应的readystatechange事件被触发时)的Unix毫秒时间戳。domContentLoadedEventStart返回当前网页的DOMContentLoaded事件发生时的Unix毫秒时间戳(即DOM结构解析完毕,所有脚本开始运行时)。domContentLoadedEventEnd返回当前网页所有需要执行的脚本执行完毕后的Unix毫秒时间戳。domComplete返回当前网页DOM结构生成时的Unix毫秒时间戳(即当Document.readyState属性变为“complete”并发生相应的readystatechange事件时)。loadEventStart返回当前页面加载事件回调函数开始时的Unix毫秒时间戳。如果事件未发生,则返回0。loadEventEnd返回当前网页加载事件回调函数结束时的Unix毫秒时间戳。如果事件未发生,则返回0。如何分析页面整体加载速度一般页面统计所需参数(dom解析时间、domContentLoaded时间、onload时间、白屏时间、getStyleConfig接口返回时间-准备加载新页面的开始时间)letpt=window.performance.timing;/*dom解析时间***1.domComplete*当前网页DOM结构生成时的Unix毫秒时间戳(即Document.readyState属性变为“complete”时对应的*readystatechange事件发生)**2.domInteractive*当前网页的DOM结构结束解析并开始加载嵌入资源时的Unix毫秒时间戳*,即Document.readyState属性变为“interactive”并触发相应的readystatechange事件时*。*/letdomComplete=pt.domComplete-pt.domInteractive;/*domContentLoaded时间***当前网页DOM结构生成时(即Document.readyState属性变为“complete”,对应*1.domContentLoadedEventEnd*网页DOMContentLoaded事件发生时的Unix毫秒时间戳***2.navigationStart*当前浏览器窗口上一个网页关闭时unload事件发生时的Unix毫秒时间戳。*如果没有之前的网页,则等于fetchStart属性*/letdomLoaded=pt.domContentLoadedEventEnd-pt.navigationStart;/*onload时间*1.loadEventEnd*当前网页加载事件回调函数结束时的Unix毫秒时间戳。如果事件未发生,则返回0。*/letonload=pt.loadEventEnd-pt.navigationStart;//白屏时间,getStyleConfig接口返回时间-准备加载新页面的开始时间letwhite=window.dbStyleConfigEnd?window.dbStyleConfigEnd-pt.navigationStart:'';让dbStyle=window.dbStyleConfigEnd-window.dbStyleConfigStart;让url=`/statistics/activityPagePerf?hdType=${CFG.appName}&oaId=${CFG.actId}&domComplete=${domComplete}&domLoaded=${domLoaded}&onload=${onload}&white=${white}&dbStyle=${dbStyle}`;主要是查看PAGET_pageloadingtime这个指标值,这个指标指的是页面整体的加载时间但是不包括(onload事件和redirect),这个指标的值可以直接反映用户体验。通过该指标可以知道指定时间段内的页面加载速度值,以及与日、周、月的对比。还可以查询指标ALLT_pagecompleteloadingtime,可以从浏览器开始导航(用户点击链接或者在地址栏输入url或者点击刷新,返回按钮)到页面onload时的所有时间事件js完全完成。如果发现页面加载速度有上升或下降,可以查询前面各项的Index值,大体上它们的关系如下:1.dom开始加载前的所有耗时=重定向时间+域名解析时间+建立连接时间+请求时间+接收数据时间2.pageLoadTime页面加载时间=域名解析时间+建立连接时间+请求时间+接收数据时间+解析dom时间+到加载dom时间+接收数据时间+解析dom时间+加载dom时间+执行onload事件需要时间4.resourcesLoadedTime资源加载时间=解析dom耗时+加载dom耗时