引言
在前端开发中，长任务（Long Task）是指执行时间超过50毫秒的任务，它可能导致页面卡顿、响应延迟或用户体验下降。为了及时发现和解决这些问题，我们需要在前端监控SDK中实现长任务的捕获。
requestIdleCallback
requestIdleCallback是一个用于在浏览器空闲时执行回调函数的API，我们可以使用它来检测是否存在长任务。通过在回调函数中执行一段耗时较长的代码，并设置一个时间阈值，如果超过阈值，则认为存在长任务。
longTask.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的时候的一些参数。
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可以更全面地捕获长任务。在实际开发中，我们可以根据具体需求和场景选择合适的方式来实现长任务的捕获，并将捕获到的信息发送到监控服务器进行记录和分析，以提高应用程序的性能和用户体验。
原文链接：https://juejin.cn/post/7314978984654635035 作者：俊刚
