JS `Long Tasks API`：识别并优化阻塞主线程的长任务

各位观众，掌声鼓励一下！今天咱们聊聊前端性能优化里一个挺重要的家伙：Long Tasks API。别担心，这玩意儿听起来唬人，其实没那么复杂，咱们一点点把它扒个精光。

开场白：为啥要关心 Long Tasks？

想象一下，你在一个高档餐厅点了个菜，服务员跟你说：“稍等，这个菜有点复杂，要炒个五分钟。” 五分钟啊！搁谁谁不烦躁？你可能会开始玩手机，或者跟朋友抱怨。

网页也一样，如果主线程被某个任务霸占太久，用户就会感觉到卡顿、延迟，用户体验直线下降。这个“霸占太久”的任务，就是我们今天要说的 Long Task。

所以，优化 Long Tasks，就是为了让用户觉得咱们的网页“丝滑流畅”，体验好，用户才愿意留下来嘛。

什么是 Long Tasks API？

Long Tasks API 是一种浏览器提供的接口，它可以让我们检测到执行时间超过 50 毫秒的任务。 50 毫秒听起来很短，但对于用户来说，这已经足够让他们感觉到卡顿了。

这个 API 就像一个监控器，时刻盯着主线程，一旦发现有任务执行时间超过 50 毫秒，它就会发出警报，告诉我们哪个任务阻塞了主线程，以及阻塞了多长时间。

怎么用 Long Tasks API？

使用 Long Tasks API 非常简单，只需要使用 PerformanceObserver 监听 longtask 事件即可。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task detected:", entry);
    console.log("Task name:", entry.name);
    console.log("Task duration:", entry.duration);
    console.log("Task start time:", entry.startTime);
    // 在这里可以做一些处理，例如记录日志、发送到服务器等等
  });
});

observer.observe({ type: "longtask", buffered: true });

这段代码做了什么呢？

创建 PerformanceObserver 对象: new PerformanceObserver() 创建一个观察者，它会监听性能相关的事件。
定义回调函数: 当观察者监听到 longtask 事件时，会执行这个回调函数。list 参数包含了所有 longtask 事件的信息。
获取 Long Task 信息: list.getEntries() 返回一个数组，包含了所有 Long Task 的 PerformanceEntry 对象。我们可以遍历这个数组，获取每个 Long Task 的详细信息，例如任务名称、执行时长、开始时间等等。
启动观察者: observer.observe({ type: "longtask", buffered: true }) 告诉观察者开始监听 longtask 事件。buffered: true 表示即使在观察者创建之前发生的 Long Task 事件，也会被记录下来。

PerformanceEntry 对象里有什么？

PerformanceEntry 对象包含了 Long Task 的详细信息，其中一些比较重要的属性如下：

属性	描述
`name`	任务的名称，通常是引起 Long Task 的函数或脚本的名称。
`duration`	任务的执行时长，单位是毫秒。
`startTime`	任务的开始时间，相对于页面加载的时间，单位是毫秒。
`attribution`	一个数组，包含了引起 Long Task 的资源的信息。例如，如果是脚本引起的 Long Task，`attribution` 数组会包含脚本的 URL。注意：部分浏览器可能不支持这个属性。
`toJSON()`	可以将 `PerformanceEntry` 对象转换为 JSON 格式的字符串，方便我们进行日志记录或发送到服务器。

实战演练：模拟一个 Long Task

为了更好地理解 Long Tasks API，咱们来模拟一个 Long Task。

function simulateLongTask() {
  let startTime = performance.now();
  while (performance.now() - startTime < 150) {
    // 模拟耗时操作
  }
  console.log("Long task finished");
}

document.getElementById("longTaskButton").addEventListener("click", simulateLongTask);

这段代码定义了一个 simulateLongTask 函数，它会执行一个循环，持续 150 毫秒，模拟一个耗时操作。然后，我们将这个函数绑定到一个按钮的点击事件上。当用户点击按钮时，simulateLongTask 函数就会被执行，从而触发一个 Long Task 事件。

打开浏览器的开发者工具，点击按钮，你就会在控制台中看到 Long Tasks API 输出的 Long Task 信息。

优化 Long Tasks 的策略

既然我们已经知道怎么检测 Long Tasks 了，接下来就要想办法优化它们。优化 Long Tasks 的方法有很多，这里介绍一些常用的策略：

代码分割 (Code Splitting):

将大型 JavaScript 文件分割成多个小文件，按需加载。这样可以减少单个任务的执行时间，避免阻塞主线程。

例如，使用 webpack 或 Parcel 等工具进行代码分割。
延迟加载 (Lazy Loading):

将非关键资源（例如图片、视频、第三方库）延迟加载，直到用户需要它们时才加载。这样可以减少页面初始加载时的负担，缩短首屏渲染时间。

可以使用 IntersectionObserver API 来实现延迟加载。

Web Workers:

将一些耗时的计算或数据处理任务放到 Web Workers 中执行，避免阻塞主线程。 Web Workers 是运行在后台的线程，不会影响页面的交互。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: 'some data' });

worker.onmessage = (event) => {
  console.log('Received from worker:', event.data);
};

// worker.js
self.onmessage = (event) => {
  const data = event.data;
  // 执行耗时操作
  const result = doSomeHeavyCalculation(data);
  self.postMessage(result);
};

function doSomeHeavyCalculation(data) {
  // 模拟耗时计算
  let sum = 0;
  for (let i = 0; i < 100000000; i++) {
    sum += i;
  }
  return sum;
}

优化算法:

检查代码中是否存在低效的算法或逻辑，尝试使用更高效的算法来替代。例如，使用查找表代替复杂的计算，使用缓存来避免重复计算。
使用 requestAnimationFrame:

将一些非必要的 DOM 操作放到 requestAnimationFrame 回调函数中执行。 requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，这样可以避免在主线程上进行频繁的 DOM 操作，提高页面的渲染性能。
```
function updateUI() {
  // 更新 UI 的代码
}

requestAnimationFrame(updateUI);
```
虚拟化列表 (Virtualized Lists):

对于包含大量数据的列表，只渲染当前视口中的数据，而不是渲染整个列表。这样可以减少 DOM 元素的数量，提高页面的渲染性能。

可以使用 react-virtualized 或 vue-virtual-scroller 等库来实现虚拟化列表。
节流 (Throttling) 和防抖 (Debouncing):

对于频繁触发的事件（例如 scroll、resize），使用节流或防抖来限制事件处理函数的执行频率。这样可以避免在主线程上进行频繁的计算或 DOM 操作，提高页面的响应速度。
```
// 节流
function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const now = Date.now();
    const context = this;

    if (now - lastExecTime >= delay) {
      func.apply(context, args);
      lastExecTime = now;
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(context, args);
        lastExecTime = Date.now();
        timeoutId = null;
      }, delay - (now - lastExecTime));
    }
  };
}

// 防抖
function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    const context = this;

    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
```
节流 (Throttling) 保证一个函数在固定的时间间隔内只执行一次。比如，你想限制一个函数每 200 毫秒最多执行一次，就可以使用节流。想象一下水龙头，你拧开之后，水流会以固定的速度流出，这就是节流。

防抖 (Debouncing) 保证一个函数在最后一次触发后，延迟一段时间再执行。如果在延迟时间内再次触发，则重新计时。比如，你想在用户停止输入 500 毫秒后才执行搜索，就可以使用防抖。想象一下电梯，只有当所有人都进入电梯并且一段时间内没有人再按按钮时，电梯才会开始运行，这就是防抖。

避免强制同步布局 (Avoid Forced Synchronous Layouts):

强制同步布局是指在 JavaScript 代码中，先读取 DOM 元素的样式信息，然后立即修改 DOM 元素的样式。这样会导致浏览器强制进行重排 (Reflow) 和重绘 (Repaint)，影响页面的渲染性能。

为了避免强制同步布局，应该尽量避免在读取 DOM 元素的样式信息后立即修改 DOM 元素的样式。可以将读取和修改操作分离开，或者使用缓存来避免重复读取 DOM 元素的样式信息。

// 强制同步布局的例子
function updateLayout() {
  const element = document.getElementById('myElement');
  const width = element.offsetWidth; // 读取 DOM 元素的样式信息
  element.style.height = width + 'px'; // 修改 DOM 元素的样式
}

// 避免强制同步布局的例子
function updateLayout() {
  const element = document.getElementById('myElement');
  const width = element.offsetWidth; // 读取 DOM 元素的样式信息
  requestAnimationFrame(() => {
    element.style.height = width + 'px'; // 在下一次重绘之前修改 DOM 元素的样式
  });
}

避免大的，复杂的布局

大的，复杂的布局会导致浏览器花费大量的时间来计算元素的位置和大小。尽量简化布局，减少嵌套的层级，可以减少布局时间。
使用 CSS Containment

CSS Containment 允许开发者告诉浏览器，一个元素及其内容与文档的其余部分是独立的。这使得浏览器可以更好地优化渲染过程，避免不必要的重绘和重排。

总结

Long Tasks 是影响页面性能的重要因素之一。通过使用 Long Tasks API，我们可以检测到 Long Tasks，并采取相应的优化策略来提高页面的性能，改善用户体验。

记住，优化是一个持续的过程，需要不断地分析和调整。没有银弹，只有适合自己项目的最佳实践。

Q&A 环节

好了，今天的分享就到这里。大家有什么问题吗？尽管提问，我会尽力解答。

（等待提问）

感谢大家的参与！希望今天的分享对大家有所帮助。我们下次再见！

发表回复 取消回复

发表回复取消回复