Web Worker 和 SharedWorker

简介

  web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。以下面的代码为例：

• index.html

    <button id="sortBtn">排序，Worker</button>
    <p id="resultArr"></p>
    <button id="sharesort">排序，SharedWorker</button>
    <p id="shareresultArr"></p>
  

    const sortBtn = document.getElementById('sortBtn');
    const resultArr = document.getElementById('resultArr');
  
    const sharesortBtn = document.getElementById('sharesort');
    const shareresultArr = document.getElementById('shareresultArr');
  
    let workerArr = [4, 3, 1, 9];
  
    let SharedWorkerArr = [5, 2, 9, 4, 3, 1, 7, 6];
  

Worker 使用

• index.html (实例化)

    let worker = new Worker('index.js');
  

• 新建 index.js

    // 监听主页面发送过来的消息
    onmessage = function(e) {
      const data = e.data;
      postMessage(
        data.sort((a, b) => a - b)
      )
    }
  

• index.html (将数据发送index.js中)

    sortBtn.addEventListener('click', () => {
      worker.postMessage(workerArr);
    });
  

  监听接受 index.js 返回的数据

    worker.onmessage = function (e) {
      resultArr.textContent = e.data;
    };
  

SharedWorker 使用

• index.html (实例化)

    let shareWorker = new SharedWorker('shareworker.js');
  

• 新建 shareworker.js

    onconnect = function(e) {
      const port = e.ports[0]
  
      port.onmessage = function(e) {
        const data = e.data
        port.postMessage(data.sort((a, b) => a - b))
      }
    }
  

• index.html (将数据发送shareworker.js中)

    sharesortBtn.addEventListener('click', () => {
      shareWorker.port.postMessage(sharearr);
    });
  

  监听接受 shareworker.js 返回的数据

    shareWorker.port.onmessage = function (e) {
      shareresultArr.textContent = e.data;
    };
  

结果