前端监控sdk开发(四)长任务

引言

在前端开发中,长任务(Long Task)是指执行时间超过50毫秒的任务,它可能导致页面卡顿、响应延迟或用户体验下降。为了及时发现和解决这些问题,我们需要在前端监控SDK中实现长任务的捕获。

requestIdleCallback

requestIdleCallback是一个用于在浏览器空闲时执行回调函数的API,我们可以使用它来检测是否存在长任务。通过在回调函数中执行一段耗时较长的代码,并设置一个时间阈值,如果超过阈值,则认为存在长任务。

longTask.js

js 复制代码
export function longTask () {
  new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.duration > config.longTaskTime) {
        let lastEvent = getLastEvent()
        requestIdleCallback(() => {
          tracker.send({
            kind: 'experience',
            type: 'longTask',
            eventType: lastEvent?.type,
            startTime: entry.startTime,
            duration: entry.duration,
            selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
          })
        })
      }
    })
  }).observe({ entryTypes: ['longtask'] })
}

这段代码是一个用于监测长任务(long task)的函数。长任务是指执行时间较长的任务,可能会导致页面卡顿或响应变慢。

首先,代码定义了一个名为longTask的导出函数。这意味着该函数可以在其他地方被引用和调用。

在函数内部,它创建了一个PerformanceObserver对象,并通过构造函数的参数传入一个回调函数。PerformanceObserver是一个用于监测性能指标的接口,它可以观察到一系列性能条目(performance entries)。

回调函数接收一个参数list,代表观察到的性能条目列表。通过调用list.getEntries()方法可以获取到这个列表中的所有条目。

接下来,代码使用了forEach循环遍历每个性能条目。对于每个条目,它检查了其执行时间是否超过了配置中定义的阈值(config.longTaskTime)。如果超过了阈值,则表示这是一个长任务。

在长任务被检测到后,代码通过调用getLastEvent()方法获取最后一次用户交互事件(如点击、滚动等)。然后使用requestIdleCallback()方法来在浏览器空闲时执行回调函数。

在回调函数中,代码通过调用tracker.send()方法发送一个包含有关长任务的信息的请求。这些信息包括事件类型、开始时间、持续时间和选择器(用于获取触发长任务的元素)等。

总结起来,这段代码的作用是监测页面中执行时间较长的任务,并在这些任务被检测到后,发送相关信息以便进行进一步分析和优化。

上述所用到的getLastEventgetStackLinesgetSelector 可看前端监控sdk开发(二)js错误捕获

config.js

主要用于方便后续提供给用户的一些配置参数。用于初始化sdk的时候的一些参数。

js 复制代码
const config = {
  url: '', // 上报路径
  longTaskTime: 100, // ms
}

export function setConfig(options) {
  for (const key in config) {
    if (options[key]) {
      config[key] = options[key]
    }
  }
}

export default config

总结

通过使用requestIdleCallback可以检测是否存在长任务;结合使用PerformanceObserver和requestIdleCallback可以更全面地捕获长任务。在实际开发中,我们可以根据具体需求和场景选择合适的方式来实现长任务的捕获,并将捕获到的信息发送到监控服务器进行记录和分析,以提高应用程序的性能和用户体验。

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui