V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cl903254852
V2EX  ›  程序员

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

  •  
  •   cl903254852 · 2019-11-30 15:45:18 +08:00 · 1613 次点击
    这是一个创建于 1580 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 明明是开了一个新线程来处理阻塞问题,虽然没有完全阻塞主线程 但确实让动画出现明细卡顿,这是为什么?

    3 条回复    2019-11-30 16:29:40 +08:00
    xrr2016
        1
    xrr2016  
       2019-11-30 16:01:20 +08:00
    实验了下是 `worker.js` 里面的 `console.log('hello');` 这句影响的。
    cl903254852
        2
    cl903254852  
    OP
       2019-11-30 16:16:20 +08:00
    @xrr2016 还真是,为什么
    myqoo
        3
    myqoo  
       2019-11-30 16:29:40 +08:00
    控制台关了测的吗?开着肯定不行,大量 console.log 会占用 UI 渲染线程的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3214 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:00 · PVG 20:00 · LAX 05:00 · JFK 08:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.