web worker原理

Posted 2020-10-04 Wayne Zhu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web worker原理相关的知识，希望对你有一定的参考价值。

什么是 web worker？

　　我们一直强调javascript是单线程的，但是web worker的出现使得JavaScript可以在多线程上跑，只是web worker本身适合用于一些复杂的、耗费cpu的运算，不能操作window、document、parent对象，所以说本质上的JavaScript还是单线程的。

　　这里，我们仅仅举一个简单的例子，看看web worker是怎么运行的，毕竟是html5的规范，目前浏览器的支持还不是很好。

　　web worker就是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您还可以做任意想做的事情，不会影响点击等操作。

为什么需要web worker？

　　对于耗时而不操作DOM的JavaScript，我们就可以使用web worker，增强性能。

web worker有什么要注意的地方？　　

不是所有的浏览器都支持，使用前要检查浏览器是否支持。
web worker运行于外部文件中，所以他们无法访问下面的JavaScript对象。
理解好 worker，worker在计算机领域通常被翻译为线程或者是进程。而这里的worker意义也是如此。我们需要将之正确对待。

web worker实例

创建worker.js外部文件：

var i = 0; 
setInterval(function () {
  postMessage(i++);
}, 1000);

html文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>计数：<span id="result"></span></p>
  <button onclick="start()">web worker开始工作</button>
  <button onclick="stop()">web worker结束工作</button>
  <script>
    var w;
    function start() {
      if (typeof Worker != ‘undefined‘) {
        w = new Worker(‘worker.js‘);
        w.onmessage = function (event) {
          document.getElementById(‘result‘).innerHTML = event.data;
        }
      } else {
        document.getElementById(‘result‘).innerHTML = ‘您的浏览器不支持web worker‘;
      }

    }

    function stop() {
      w.terminate();
      w = undefined;
    }
  </script>
</body>
</html>

即首先判断：是否支持Worker构造函数，如果支持，就传递一个js文件创建这个文件的实例，然后就可以调用 message 事件，接收从 worker.js 中获得的数据。

注意：必须在服务器上测试，否则会有跨域问题。

最终，我就可以看到效果了。

代码地址： https://github.com/zzw918/cross-origin/tree/master/webWorker

以上是关于web worker原理的主要内容，如果未能解决你的问题，请参考以下文章

前端技能树，面试复习第 37 天—— 浏览器原理：进程与线程 | 浏览器有哪些进程 | Service Worker

愚公系列2022年06月 .NET架构班 079-分布式中间件 ScheduleMaster的集群原理