前端监控之初识性能指标

前端监控主要分成三个部分,数据采集、数据上报、数据存储。数据的采集又可以分为性能监控(常见性能指标、资源和接口的请求加载时间)、错误的收集、用户的行为。这一篇我们先来了解一下常见的性能指标。

性能指标

performance

performance.now()

performance.now() 方法返回一个精确到毫秒的时间戳,个别浏览器返回的时间戳没有被限制在一毫秒的精确度内,以浮点数的形式表示时间,精度最高可达微秒级,因此测试时如果需要比毫秒更高的精度,可以使用这个方法。

performance.now()返回的时间是距离Performance.timeOrigin(导航开始)的时间,Date.now()方法返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

performance.now()方法的语义在level1和level2之间发生了变化。performance.now()方法过去是相对于导航计时规范中的performance.timing.navigationStart属性的。Performance. now()现在是相对于Performance.timeOrigin。

performance.timing.navigationStart 是基于浏览器的客户端时间戳,不依赖于服务器时间或其他外部时钟。然而,它仍然可能受到用户操作系统或浏览器中的时钟更改的影响,这可能导致不准确的时间戳。

Changes Level 1 Level 2
Relative to performance.timing.navigationStart Performance.timeOrigin
Triggering conditions Document fetch or unload prompt (if any) Creation of the browsing context (if no prior document), unload prompt (if any), or start of the navigation (as defined in HTML, a few steps before fetch)

performance.navigation

performance.navigation 对象提供了在指定的时间段里发生的操作相关信息,包括页面是加载还是刷新、发生了多少次重定向等。我们可以看看:

属性 含义
type 表示是如何导航到这个页面的
redirectCount 表示在到达这个页面之前重定向了多少次

其中,type 的取值及含义如下表:

type的值 含义
0 当前页面是通过点击链接,书签和表单提交,或者脚本操作,或者在url中直接输入地址
1 点击刷新页面按钮或者通过Location.reload()方法显示的页面
2 页面通过历史记录和前进后退访问时
255 任何其他方式

具体数据示例:

这个数据,主要是帮助我们看看页面重定向次数是否过多(能否减少重定向),页面访问的方式主要是怎样的,针对访问方式较多的场景我们能否做些优化。

performance.timing

window.performance.timing里面有很多的性能相关的时间戳记录,我们来看一些常用的:

属性 含义
navigationStart 准备加载页面的起始时间,level2阶段使用的是performance.timeOrigin
domainLookupStart 开始进行dns查询的时间 如果使用了强缓存,就不需要dns解析,返回的便是fetchStart的时间
domainLookupEnd dns查询结束的时间
connectStart TCP连接开始
connectEnd TCP连接完成
domInteractive 解析dom树开始
domComplete 解析dom树结束
domContentLoadedEventEnd DOMContentLoaded事件完成
domContentLoadedEventStart DOMContentLoaded事件启动之前的时间
loadEventEnd onload事件结束的时间
fetchStart 开始检查缓存或开始获取资源的时间
domLoading loading的时间 (这个时候还木有开始解析文档)
redirectStart 第一个 HTTP 重定向开始时的时间戳,没有重 定向或者重定向中的不同源,这个值会是 0
redirectEnd 最后一个 HTTP 重定向开始时的时间戳,没有 重定向或者重定向中的不同源,这个值会是 0

详情可见:Navigation Timing Level 2

性能指标

名称 公式
DNS查询耗时 domainLookupEnd - domainLookupStart
TCP链接耗时 connectEnd - connectStart
request请求耗时 responseEnd - responseStart
解析dom树耗时 domComplete - domInteractive
白屏时间 domloading - fetchStart
domready时间 domContentLoadedEventEnd - fetchStart
onload时间 loadEventEnd - fetchStart
资源加载 loadEventStart - domContentLoadedEventEnd
  1. 白屏时间:页面开始显示内容的时间 。也就是:浏览器显示第一个字符或者元素的时间
  1. 首屏时间:用户打开网站开始,到浏览器首屏内容渲染完成的时间。对于用户体验来说,首屏时间是用户对一个网站的重要体验因素

    计算方法参考:segmentfault.com/a/119000004...

  1. HTML 加载完成时间
  1. 首屏图片加载完成时间
  1. 首屏接口完成加载完成时间
  1. 各资源耗时(主要统计css/js资源耗时)
  1. FP(首次绘制时间)
  1. FCP(首次内容渲染时间)
  1. onload时间

扩展

window.performance API 是有缺点的,在 SPA 切换路由时,window.performance.timing 的数据不会更新。所以我们需要另想办法来统计切换路由到加载完成的时间。拿 Vue 举例,一个可行的办法就是切换路由时,在路由的全局前置守卫 beforeEach 里获取开始时间,在组件的 mounted 钩子里执行 vm.$nextTick 函数来获取组件的渲染完毕时间。

javascript 复制代码
router.beforeEach((to, from, next) => {
    store.commit('setPageLoadedStartTime', new Date())
})
​
mounted() {
    this.$nextTick(() => {
        this.$store.commit('setPageLoadedTime', new Date() - this.$store.state.pageLoadedStartTime)
    })
}

参考文档:

相关推荐
也无晴也无风雨32 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui