统计页面的longtask(长任务)

weixin_43843897

于 2025-02-07 18:35:33 发布

阅读量318

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43843897/article/details/145500545

版权

统计页面的longtask（长任务）可以通过JavaScript中的Performance API来实现，具体步骤如下：

‌创建PerformanceObserver实例‌：
- 使用PerformanceObserver API创建一个观察者实例，这个实例将用于监听长任务。长任务指的是执行时间超过50毫秒的任务，这些任务可能会阻塞主线程，影响页面的交互性和流畅性。
‌注册回调函数‌：
- 在创建PerformanceObserver实例时，需要提供一个回调函数。这个回调函数会在检测到长任务时被调用，并接收一个包含长任务性能条目的列表。
‌处理长任务数据‌：
- 在回调函数中，可以遍历长任务性能条目的列表，获取每个长任务的详细信息，如开始时间、持续时间等。然后，可以对这些数据进行处理，例如计算平均持续时间，或将数据发送到服务器进行进一步分析。
‌开始观察‌：
- 使用observe方法开始观察性能条目，并指定entryTypes为['longtask']，以仅观察长任务。

‌停止观察和获取统计数据‌：

如果需要停止观察，可以调用disconnect方法。此外，还可以根据需要输出统计数据，如长任务的总次数和总耗时。

// 创建一个性能观察者实例来订阅长任务
const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
        console.log(`LongTask Detected:`, entry);
        console.log(`Start Time: ${entry.startTime}, Duration: ${entry.duration}`);
        // TODO: 这里可以根据需要进一步处理这些数据,比如发送给服务器
    });
});

// 开始观察长任务
observer.observe({entryTypes: ["longtask"]});