Web Worker 优化长任务

Web Worker 优化长任务

引用

CSDN

1.

https://blog.csdn.net/weixin_45822171/article/details/137049061

在前端开发中，长任务常常会导致页面卡顿和掉帧问题。本文将介绍如何使用Web Worker来优化长任务，避免页面UI阻塞。通过具体的代码示例和性能测试工具的使用，帮助读者理解Web Worker的工作原理和应用场景。

由于浏览器GUI渲染线程与JS引擎线程是互斥的关系，当页面中有很多长任务时，会造成页面UI阻塞，出现界面卡顿、掉帧等情况。

查看页面的长任务

打开控制台，选择Performance工具，点击Start按钮，展开Main选项，会发现有很多红色的三角，这些就属于长任务（长任务：执行时间超过50ms的任务）。

测试实验

如果直接把下面这段代码直接丢到主线程中，计算过程中页面一直处于卡死状态，无法操作。

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

使用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的通信时长

并不是执行时间超过50ms的任务，就可以使用Web Worker，还要先考虑通信时长的问题。假如一个运算执行时长为100ms，但是通信时长为300ms，用了Web Worker可能会更慢。

比如新建一个web worker, 浏览器会加载对应的worker.js资源，下图中的Time是这个资源的通信时长（也叫加载时长）。

当任务的运算时长 - 通信时长 > 50ms，推荐使用Web Worker。