谁能解释一下，用了 Web Worker 为什么会出现卡顿？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1817 天前的主题，其中的信息可能已经有所发展或是发生改变。

Web Worker 可以开新线程来处理任务，不会让主线程(UI 线程)出现卡顿

然后我写了一下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>任务队列</title>
    <style>
      #aa {
        width: 100px;
        height: 100px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div id="aa"></div>
  </body>
  <script>
    // 动画
    var start = null;
    var element = document.getElementById('aa');
    element.style.position = 'absolute';

    function step(timestamp) {
      if (!start) start = timestamp;
      var progress = timestamp - start;
      element.style.left = Math.min(progress / 10, 200) + 'px';
      if (progress < 2000) {
        window.requestAnimationFrame(step);
      }
    }

    window.requestAnimationFrame(step);

    // 使用 web worker
    var w = new Worker('worker.js');
  </script>
</html>

worker.js

var now = performance.now();
while (now + 1000 > performance.now()) {
  console.log('hello');
}

如果把var w = new Worker('worker.js'); 注释掉，则动画很顺。

先看下动画效果：

上面的图是没有使用 web worker 的，动画很平顺（ gif 图看上去卡顿，其实很顺）

而这张图是使用 web worker 处理了一段阻塞代码，会导致动画明显卡顿

问题：Web Worker 明明是开了一个新线程来处理阻塞问题，虽然没有完全阻塞主线程但确实让动画出现明细卡顿，这是为什么？

Worker

var

卡顿

Web

3 条回复 • 2019-11-30 16:29:40 +08:00

xrr2016

2019-11-30 16:01:20 +08:00

实验了下是 `worker.js` 里面的 `console.log('hello');` 这句影响的。

cl903254852

2019-11-30 16:16:20 +08:00

@xrr2016 还真是，为什么

myqoo

2019-11-30 16:29:40 +08:00

控制台关了测的吗？开着肯定不行，大量 console.log 会占用 UI 渲染线程的