前端监控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()方法发送一个包含有关长任务的信息的请求。这些信息包括事件类型、开始时间、持续时间和选择器（用于获取触发长任务的元素）等。

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

上述所用到的getLastEvent 、getStackLines 、getSelector 可看前端监控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可以更全面地捕获长任务。在实际开发中，我们可以根据具体需求和场景选择合适的方式来实现长任务的捕获，并将捕获到的信息发送到监控服务器进行记录和分析，以提高应用程序的性能和用户体验。