Web Worker 与 SharedWorker 的介绍和使用

一、Web Worker

1 Web Worker 是什么

Web Worker是 HTML5 标准的一部分，这一规范定义了一套 API。

Web Worker 允许我们在js主线程之外运行一个独立的线程（Worker），也就是运行在后台的一个独立的js脚本。

因为Worker线程是独立的线程，与js主线程能够同时允许，互不阻塞。
所以如果有大量运算任务时，可以把任务交给Worker线程去处理，当Worker线程计算完成，再把结果返回给js主线程。这样，js主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自然而然也提高了。

能解决的问题是：
1 解决页面卡死问题；
2 发挥多核CPU的优势，提高JS性能

2 Web Worker 使用

2.1 创建 worker

创建 worker 只需要通过 new 调用 Worker() 构造函数即可，它接收两个参数

const worker = new Worker(path, options);

参数	说明
path	有效的js脚本的地址，必须遵守同源策略。无效的js地址或者违反同源策略，会抛出`SECURITY_ERR` 类型错误
options.type	可选，用以指定 worker 类型。该值可以是 `classic` 或 `module`。如未指定，将使用默认值 `classic`
options.credentials	可选，用以指定 worker 凭证。该值可以是 `omit`, `same-origin`，或 `include`。如果未指定，或者 type 是 `classic`，将使用默认值 `omit` (不要求凭证)
options.name	可选，在 `DedicatedWorkerGlobalScope` 的情况下，用来表示 worker 的 scope 的一个 `DOMString` 值，主要用于调试目的。

2.2 主线程与 worker 线程数据传递

发送消息：postMessage()。postMessage() 方法接收的参数可以是字符串、对象、数组等

接受消息：监听 message 事件

2.3 监听错误

web worker 提供两个事件监听错误，error 和 messageerror。

这两个事件的区别是:

事件	描述
`error`	当worker内部出现错误时触发
`messageerror`	当 `message` 事件接收到无法被反序列化的参数时触发

2.4 关闭 worker 线程

worker 线程的关闭在主线程和 worker 线程都能进行操作，但对 worker 线程的影响略有不同。

// main.js（主线程）
const myWorker = new Worker('/worker.js'); // 创建worker
myWorker.terminate(); // 关闭worker

// worker.js（worker线程）
self.close(); // 直接执行close方法就ok了

无论是在主线程关闭 worker，还是在 worker 线程内部关闭 worker，worker 线程当前的 Event Loop 中的任务会继续执行。至于 worker 线程下一个 Event Loop 中的任务，则会被直接忽略，不会继续执行。

区别是，在主线程手动关闭 worker，主线程与 worker 线程之间的连接都会被立刻停止，即使 worker 线程当前的 Event Loop 中仍有待执行的任务继续调用 postMessage() 方法，但主线程不会再接收到消息。

在 worker 线程内部关闭 worker，不会直接断开与主线程的连接，而是等 worker 线程当前的 Event Loop 所有任务执行完，再关闭。也就是说，在当前 Event Loop 中继续调用 postMessage() 方法，主线程还是能通过监听message事件收到消息的。

2.5 Worker 线程引用其他js文件

总有一些场景，需要放到 worker 进程去处理的任务很复杂，需要大量的处理逻辑，我们当然不想把所有代码都塞到 worker.js 里，那样就太糟糕了。不出意料，web worker 为我们提供了解决方案，我们可以在 worker 线程中利用 importScripts() 方法加载我们需要的js文件，而且，通过此方法加载的js文件不受同源策略约束！

// utils.js
const add = (a, b) => a + b;

// worker.js（worker线程）
// 使用方法：importScripts(path1, path2, ...); 

importScripts('./utils.js'); // 加载需要的js文件

console.log(add(1, 2)); // log 3

2.6 ESModule 模式

还有一些场景，当你开启一个新项目，正高兴的用 importScripts() 导入js文件时发现， importScripts() 方法执行失败。仔细一看，原来是新项目的 js 文件都用的是 ESModule 模式。难道要把引用到的文件都改一遍吗？当然不用，还记得上文提到初始化 worker 时的第二个可选参数吗，我们可以直接使用 module 模式初始化 worker 线程！

// main.js（主线程）
const worker = new Worker('/worker.js', {
    
    
    type: 'module'  // 指定 worker.js 的类型
});

// utils.js
export default add = (a, b) => a + b;

// worker.js（worker线程）
import add from './utils.js'; // 导入外部js

self.addEventListener('message', e => {
    
     
    postMessage(e.data);
});

add(1, 2); // log 3

export default self; // 只需把顶级对象self暴露出去即可

2.7 主线程和 worker 线程可传递哪些类型数据

很多场景，在调用某些方法时，我们将一些自定义方法当作参数传入。但是，当你使用 postMessage() 方法时这么做，将会导致 DATA_CLONE_ERR 错误。

// main.js（主线程）
const myWorker = new Worker('/worker.js'); // 创建worker

const fun = () => {
    
    };

myWorker.postMessage(fun); // Error：Failed to execute 'postMessage' on 'Worker': ()=>{} could not be cloned.

那么，使用 postMessage() 方法传递消息，可以传递哪些数据？

postMessage() 传递的数据可以是由结构化克隆算法处理的任何值或 JavaScript 对象，包括循环引用。

结构化克隆算法不能处理的数据：

Error 以及 Function 对象；
DOM 节点
对象的某些特定参数不会被保留
- RegExp 对象的 lastIndex 字段不会被保留
- 属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write
- 原形链上的属性也不会被追踪以及复制。

结构化克隆算法支持的数据类型：

类型	说明
所有的原始类型	symbols 除外
Boolean 对象
String 对象
Date
RegExp	`lastIndex` 字段不会被保留。
`Blob`
`File`
`FileList`
ArrayBuffer
ArrayBufferView	这基本上意味着所有的类型化数组，如 Int32Array 等。
`ImageData`
Array
Object	仅包括普通对象（如对象字面量）
Map
Set

3 简单示例

主线程文件 webworker.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Web Workers</title>
  </head>
  <body>
    <button onclick="startWorker()">开启 worker 线程</button>
    <button onclick="stopWorker()">关闭 worker 线程</button>
    <script>
      var myWorker;
      function startWorker() {
      
      
        // 1 创建 worker
        myWorker = new Worker("./workers.js");

        // 2 向 worker 线程发送消息
        myWorker.postMessage("主线程向 worker 线程发送消息");

        // 3 接受 worker 线程发送的消息
        myWorker.addEventListener("message", (e) => {
      
      
          console.log("主线程收到的 worker 线程发来的数据:", e.data);
        });

        // 这种写法也可以 接收消息
        // myWorker.onmessage = e => {
      
      
        //    console.log(e.data);
        // };

        // 4 监听错误
        myWorker.addEventListener("error", (err) => {
      
      
          console.log(err.message); // 当worker内部出现错误时触发
        });
        myWorker.addEventListener("messageerror", (err) => {
      
      
          console.log(err.message); // 当 message 事件接收到无法被反序列化的参数时触发

        });
      }

      // 5 在主线程中关闭 worker 线程
      function stopWorker() {
      
      
        myWorker.terminate();
        console.log("关闭 worker 线程");
        myWorker = undefined;
      }
    </script>
  </body>
</html>

worker 线程文件 worker.js

(
  function () {
    
    
    // 接受与发送消息
    self.addEventListener('message', e => {
    
     // 接收到消息
      console.log('worker 线程收到的消息：', e.data);
      self.postMessage('向主线程发送消息'); // 向主线程发送消息
    });


    // 监听错误
    self.addEventListener('error', err => {
    
    
      console.log(err.message);
    });
    self.addEventListener('messageerror', err => {
    
    
      console.log(err.message);
    });


    // 关闭 worker 线程
    // self.close(); // 直接执行close方法就ok了
  }
)()

二、SharedWorker

2.1 SharedWorker 是什么

SharedWorker 是一种特殊类型的 Worker，可以被多个浏览上下文访问，比如多个 windows，iframes 和 workers，但这些浏览上下文必须同源。它们实现于一个不同于普通 worker 的接口，具有不同的全局作用域：SharedWorkerGlobalScope ，但是继承自WorkerGlobalScope

2.2 SharedWorker 的使用方式

SharedWorker 线程的创建和使用跟 worker 类似，事件和方法也基本一样。不同点在于，主线程与 SharedWorker 线程是通过MessagePort建立起链接，数据通讯方法都挂载在SharedWorker.port上。

值得注意的是，如果你采用 addEventListener 来接收 message 事件，那么在主线程初始化SharedWorker() 后，还要调用 SharedWorker.port.start() 方法来手动开启端口。

// main.js（主线程）
const myWorker = new SharedWorker('./sharedWorker.js');

myWorker.port.start(); // 开启端口

myWorker.port.addEventListener('message', msg => {
    
    
    console.log(msg.data);
})

但是，如果采用 onmessage 方法，则默认开启端口，不需要再手动调用SharedWorker.port.start()方法

// main.js（主线程）
const myWorker = new SharedWorker('./sharedWorker.js');

myWorker.port.onmessage = msg => {
    
    
    console.log(msg.data);
};

以上两种方式效果是一样的，具体信息请参考MessagePort。

由于 SharedWorker 是被多个页面共同使用，那么除了与各个页面之间的数据通讯是独立的，同一个SharedWorker 线程上下文中的其他资源都是共享的。基于这一点，很容易实现不同页面之间的数据通讯。

2.3 多页面数据共享的例子

一个利用SharedWorker实现多页面数据共享的例子

index 页面的 add 按钮，每点击一次，向 sharedWorker 发送一次 add 数据，页面 count 增加1

// index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>index page</title>
    </head>
    <body>
        <p>index page: </p>
        count: <span id="container">0</span>
        <button id="add">add</button>
        <br>
        // 利用iframe加载
        <iframe src="./iframe.html"></iframe>
    </body>
    <script type="text/javascript">
        if (!!window.SharedWorker) {
      
      
            const container = document.getElementById('container');
            const add = document.getElementById('add');
            
            const myWorker = new SharedWorker('./sharedWorker.js');
            
            myWorker.port.start();

            myWorker.port.addEventListener('message', msg => {
      
      
                container.innerText = msg.data;
            });

            add.addEventListener('click', () => {
      
      
                myWorker.port.postMessage('add');
            });
        }
    </script>
</html>

iframe 页面的 reduce 按钮，每点击一次，向 sharedWorker 发送一次 reduce 数据，页面count 减少1

// iframe.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>iframe page</title>
    </head>
    <body>
        <p>iframe page: </p>
        count: <span id="container">0</span>
        <button id="reduce">reduce</button>
    </body>
    <script type="text/javascript">
        if (!!window.SharedWorker) {
      
      
            const container = document.getElementById('container');
            const reduce = document.getElementById('reduce');

            const myWorker = new SharedWorker('./sharedWorker.js');

            myWorker.port.start();
            
            myWorker.port.addEventListener('message', msg => {
      
      
                container.innerText = msg.data;
            })

            reduce.addEventListener('click', () => {
      
      
                myWorker.port.postMessage('reduce');
            });
        }
    </script>
</html>

sharedWorker 在接收到数据后，根据数据类型处理 num 计数，然后返回给每个已连接的主线程。

// sharedWorker.js

let num = 0;
const workerList = [];

self.addEventListener('connect', e => {
    
    
    const port = e.ports[0];
    port.addEventListener('message', e => {
    
    
        num += e.data === 'add' ? 1 : -1;
        workerList.forEach(port => {
    
     // 遍历所有已连接的part，发送消息
            port.postMessage(num);
        })
    });
    port.start();
    workerList.push(port); // 存储已连接的part
    port.postMessage(num); // 初始化
});

结果可以发现，index 页面和 iframe 页面的 count 始终保持一致，实现了多个页面数据同步。