JS多线程之Web Workers

2020-08-23 653 阅读1分钟

参考

Web Workers文献综述

Web Workers | MDN

说明

浏览器多线程技术，为缓解页面卡顿，提升应用性能。【多核多线程并发】 web worker会创建操作系统级别的线程，独立于主线程的js运行环境。

简单通信示例

主线程与worker线程之间通过messageEvent通信，简单示例。

在主线程中

const worker = new Worker('./worker.js'); // worker.js地址
worker.postMessage('沃克'); // 主线程向worker发送消息 
// 对worker中的postMessage作出响应
worker.onmessage = (e) => {
    console.log('沃克作出了回应：', e.datas)
};

在worker中

// 收到主线程的消息后作出响应
onmessage = (e) => {
    console.log('我收到了来自主线程的消息：', e.data)
    postMessage('到')
}

终止线程

在主线程中终止worker： myWorker.terminate();
在worker中终止：close();

处理错误

当 worker 出现运行中错误时，它的 onerror 事件处理函数会被调用。

多个worker进程

worker 能够生成更多的 worker，这就是所谓的subworker，它们必须托管在同源的父页面内。而且，subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。这使得 worker 更容易记录它们之间的依赖关系。

内容安全策略

因为worker有自己的执行上下文，不受限于document，要给worker指定内容安全策略，需要为发送worker代码的请求本身加上内容安全策略。