介绍

web worker HTML5提供得，运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

作用

给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。

这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。

这并不意味着JS语言本身支持了多线程能力，而是浏览器作为宿主环境提供了JS一个多线程运行的环境。

不过因为worker一旦新建，就会一直运行，不会被主线程的活动打断，这样有利于随时响应主线程的通性，但是也会造成资源的浪费，所以不应过度使用，用完注意关闭。

兼容性

使用

• 注意事项：

  • 同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
  • DOM操作限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象。也不能获取 document、 window等对象，但是可以获取 navigator、 location(只读)、XMLHttpRequest、 setTimeout族等浏览器API。
  • 通信限制：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
  • 脚本限制：Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
  • 文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

• 例子：

  • 主线程

    • 创建 Worker 线程：

    // 两个参数 
    var myWorker = new Worker(jsUrl, options);
    

    Worker()构造函数，第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

    • 主线程代码示例：

    <!--主线程，HTML文件的body标签中-->
    <div>
        myworker 输出内容：
        <span id='app'></span>
        <input type='text' title='' id='msg'>
        <button onclick='sendMessage()'>
                发送
        </button>
        <button onclick='stopWorker()'>
              stop!
        </button>
    </div>
    <script type='text/javascript'>
      // 使用Worker前检查一下浏览器是否支持
          if ( typeof ( Worker ) === 'undefined') 
              document.writeln(' Sorry! No Web Worker support.. ')
          else {
              // 创建 子线程 worker
              let worker = new Worker('webWork.js', { name : 'worker' });
              // 主线程 给 子线程 发消息
              worker.postMessage('Hello World');
              // worker.postMessage({method: 'echo', args: ['Work']});
    
              // 主线程 监听 子线程 发的消息
              worker.onmessage = function (event) {
                    console.log('Received message ' + event.data);
                    doSomething();
              }
              function doSomething() {
                    // 执行任务 通知 子线程调用结束
                    worker.postMessage('Work done!');
                    // 使用 完毕 关闭 子线程
                    worker.terminate();
              }
    
              // 子线程 myworker
              let myworker = new Worker('webWork2.js', { name : 'myworker'                   });
            // myworker 进行计算 监听返回的结果 显示在页面上
            myworker.onmessage = (e) => {
                  document.getElementById("app").innerHTML = e.data
            }
    
            // 点击停止 按钮 通知 mywork 停止计算
            function stopWorker () {
                  myworker.postMessage('stop');
                  // myworker 完成任务以后，主线程就可以把它关掉。
                  myworker.terminate();
            }
    
      }
      </script>
    

  • Worker线程

    • Worker线程代码示例：

      // webWork.js
    
      console.log(self.name,'webWork.js');
    
    // self代表子线程自身，即子线程的全局对象。
    
    // // 可以自己写监听
    // self.addEventListener('message', function (e) {
    //   console.log(e.data,'data')
    //   self.postMessage('You said: ' + e.data);
    // }, false);
    
    // 也可以使用 onmessage 来进行监听
    self.onmessage = (e) => {
        console.log(e.data,'e')
    self.postMessage('You said: ' + e.data);
    if (e.data == 'Work done!') {
      self.close();
      }
    }
    

     // webWork2.js
    
     console.log(self.name,'webWork2.js');
    
    // 定时器 计算值 返回给 主线程
    let i = 1;
    function add () {
     i ++;
     self.postMessage(i);
     setTimeout(add, 1000);
    }
    
    add();
    
    // 监听主线程消息
    self.onmessage = (e) => {
       if (e.data == 'stop') {
           self.close();
       }
    }
    
    

  • Worker 加载脚本

    • Worker 内部如果要加载其他脚本，有一个专门的方importScripts()。

    // 引用单个脚本
    importScripts('script1.js');
      
    // 引用多个脚本
    importScripts('script1.js', 'script2.js');
    

  • 错误处理

    • 主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的error事件。

        worker.onerror(function (event) {
        console.log([
        'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
        ].join(''));
      });
      
      // 或者
      worker.addEventListener('error', function (event) {
          // ...
        });
      

    Worker 内部也可以监听error事件。

  • 关闭 Worker

    • 使用完毕，为了节省系统资源，必须关闭 Worker。

      // 主线程
      worker.terminate();
      
      // Worker 线程
      self.close();
      

数据通信

• 主线程与 Worker 之间的通信内容，可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。

  主线程与 Worker 之间也可以交换二进制数据，比如 File、Blob、ArrayBuffer 等类型，也可以在线程之间发送。但是，拷贝方式发送二进制数据，会造成性能问题。比如，主线程向 Worker 发送一个 500MB 文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担。

  • 如果要直接转移数据的控制权，就要使用下面的写法。

    // Transferable Objects 格式
    worker.postMessage(arrayBuffer, [arrayBuffer]);
    
    // 例子
    var ab = new ArrayBuffer(1);
    worker.postMessage(ab, [ab]);
    

常用的API

• 主线程中的API：
  • worker.postMessage: 主线程往worker线程发消息，消息可以是任意类型数据，包括二进制数据
  • worker.terminate: 主线程关闭worker线程
  • worker.onmessage: 指定worker线程发消息时的回调，也可以通过worker.addEventListener('message',cb)的方式
  • worker.onerror: 指定worker线程发生错误时的回调，也可以worker.addEventListener('error',cb)
• Worker线程中的API：
  • self.postMessage: worker线程往主线程发消息，消息可以是任意类型数据，包括二进制数据
  • self.close: worker线程关闭自己
  • self.onmessage: 指定主线程发worker线程消息时的回调，也可以self.addEventListener('message',cb)
  • self.onerror: 指定worker线程发生错误时的回调，也可以 self.addEventListener('error',cb)

实战场景

• 轮询

  有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。

  function createWorker(f) {
    var blob = new Blob(['(' + f.toString() +')()']);
    var url = window.URL.createObjectURL(blob);
    var worker = new Worker(url);
    return worker;
  }
  
  var pollingWorker = createWorker(function (e) {
    var cache;
  
    function compare(new, old) { ... };
  
    setInterval(function () {
      fetch('/my-api-endpoint').then(function (res) {
        var data = res.json();
  
        if (!compare(data, cache)) {
          cache = data;
          self.postMessage(data);
        }
      })
    }, 1000)
  });
  
  pollingWorker.onmessage = function () {
    // render data
  }
  
  pollingWorker.postMessage('init');
  

注意事项

• 虽然使用worker线程不会占用主线程，但是启动worker会比较耗费资源

• 主线程中使用XMLHttpRequest在请求过程中浏览器另开了一个异步http请求线程，但是交互过程中还是要消耗主线程资源

参考链接

• MDN - Web Workers 概念与用法
• 阮一峰 - Web Worker
• JavaScript 工作原理之七－Web Workers 分类及 5 个使用场景
• Web Worker在项目中的妙用
• 怎么在 ES6+Webpack 下使用 Web Worker