Web Worker优化长任务：避免页面卡顿的实用指南

Web Worker优化长任务：避免页面卡顿的实用指南

由于浏览器GUI渲染线程与JavaScript引擎线程是互斥的关系，当页面中存在大量长任务时，会导致页面UI阻塞，出现界面卡顿、掉帧等情况。

查看页面的长任务

要查看页面中的长任务，可以使用浏览器的Performance工具：

1. 打开浏览器的开发者工具
2. 选择Performance标签
3. 点击Start按钮开始录制
4. 在录制结束后，展开Main选项

在Performance面板中，会看到一些红色的三角形标记，这些标记标识的就是长任务。长任务是指执行时间超过50ms的任务。

测试实验

下面通过一个实验来演示长任务对页面的影响：

let sum = 0;
for (let i = 0; i < 200000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random()
    }
}

如果将上述代码直接在主线程中执行，计算过程中页面会持续卡死，无法进行任何操作。

使用Web Worker优化长任务

Web Worker可以在后台线程中运行脚本，从而避免阻塞主线程。下面是使用Web Worker执行上述计算任务的示例：

worker.js

onmessage = function (e) {
  // onmessage获取传入的初始值
  let sum = e.data;
  for (let i = 0; i < 200000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random()
    }
  }
  // 将计算的结果传递出去
  postMessage(sum);
}

当使用Web Worker执行上述代码时，计算过程中页面仍然可以正常操作，不会出现卡顿现象。

考虑Web Worker的通信时长

使用Web Worker并不是没有代价的，还需要考虑通信时长的问题。例如，一个运算任务本身执行时间为100ms，但如果Web Worker的通信时长为300ms，那么使用Web Worker反而可能会使整体执行时间更长。

下图展示了创建和加载Web Worker脚本的通信时长：

因此，在决定是否使用Web Worker时，需要评估任务的运算时长减去通信时长是否大于50ms。如果满足这个条件，推荐使用Web Worker来优化长任务。