Web Worker的使用
该文引用自掘金论坛,有兴趣的请参考原作者的文章,在此对原作者表示感谢
众所周知,js最初设计是运行在浏览器中的,为了防止多个线程同时操作DOM,带来渲染冲突问题,所以js执行器被设计成单线程。但随着前端技术的发展,js能力远不止如此,当我们遇到需要大量计算的场景时(比如图像处理、视频解码等),js线程往往会被长时间阻塞,甚至造成页面卡顿,影响用户体验。为了解决单线程带来的这一弊端,Web Worker 应运而生。
一、Web Worker
1. Web Worker
是什么
Web Worker
是 HTML5 标准的一部分,这一规范定义了一套 API,允许我们在 js 主线程之外开辟新的 Worker 线程,并将一段 js 脚本运行其中,它赋予了开发者利用 js 操作多线程的能力。
因为是独立的线程,Worker 线程与 js 主线程能够同时运行,互不阻塞。所以,在我们有大量运算任务时,可以把运算任务交给 Worker 线程去处理,当 Worker 线程计算完成,再把结果返回给 js 主线程。这样,js 主线程只用专注处理业务逻辑,不用耗费过多时间去处理大量复杂计算,从而减少了阻塞时间,也提高了运行效率,页面流畅度和用户体验自然而然也提高了。
2. Web Worker
能干些什么
虽然 Worker 线程是在浏览器环境中被唤起,但是它与当前页面窗口运行在不同的全局上下文中,我们常用的顶层对象 window
,以及 parent
对象在 Worker 线程上下文中是不可用的。另外,在 Worker 线程上下文中,操作 DOM 的行为也是不可行的,document
对象也不存在。但是,location
和navigator
对象可以以可读方式访问。除此之外,绝大多数 Window 对象上的方法和属性,都被共享到 Worker 上下文全局对象中。同样,Worker 线程上下文也存在一个顶级对象 self
。
二、Web Worker 使用
1.创建Worker
创建 worker
只需要通过 new
调用 Worker()
构造函数即可,它接收两个参数
const worker = new Worker(path, options);
2.js 主线程与 worker 线程数据传递
主线程与 worker 线程都是通过 postMessage
方法来发送消息,以及监听 message
事件来接收消息。如下所示:
// main.js(主线程)
const myWorker = new Worker('/worker.js'); // 创建worker
myWorker.addEventListener('message', e => { // 接收消息
console.log(e.data); // Greeting from Worker.js,worker线程发送的消息
});
// 这种写法也可以
// myWorker.onmessage = e => { // 接收消息
// console.log(e.data);
// };
myWorker.postMessage('Greeting from Main.js'); // 向 worker 线程发送消息,对应 worker 线程中的 e.data
// worker.js(worker线程)
self.addEventListener('message', e => { // 接收到消息
console.log(e.data); // Greeting from Main.js,主线程发送的消息
self.postMessage('Greeting from Worker.js'); // 向主线程发送消息
});
好了,一个简单 worker 线程就创建成功了。
postMessage()
方法接收的参数可以是字符串、对象、数组等。具体我们在#2.7讨论。
主线程与 worker 线程之间的数据传递是传值而不是传地址。所以你会发现,即使你传递的是一个Object
,并且被直接传递回来,接收到的也不是原来的那个值了。
// main.js(主线程)
const myWorker = new Worker('/worker.js');
const obj = {name: '小明'};
myWorker.addEventListener('message', e => {
console.log(e.data === obj); // false
});
myWorker.postMessage(obj);
// worker.js(worker线程)
self.addEventListener('message', e => {
self.postMessage(e.data); // 将接收到的数据直接返回
});
3.监听错误信息
web worker 提供两个事件监听错误,error
和 messageerror
。这两个事件的区别是:
事件 | 描述 |
---|---|
error | 当worker内部出现错误时触发 |
messageerror | 当 message 事件接收到无法被反序列化的参数时触发 |
监听方式跟接收消息一致:
// main.js(主线程)
const myWorker = new Worker('/worker.js'); // 创建worker
myWorker.addEventListener('error', err => {
console.log(err.message);
});
myWorker.addEventListener('messageerror', err => {
console.log(err.message)
});
// worker.js(worker线程)
self.addEventListener('error', err => {
console.log(err.message);
});
self.addEventListener('messageerror', err => {
console.log(err.message);
});
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
事件收到消息的。
如下两个例子可以很好说明这一点:
在主线程关闭 worker
- worker 线程在接受到消息后,立即向主线程回复一条消息。然后利用计时器添加一个宏任务;利用 Promise 添加一个微任务;执行一个 for 循环。目的都是向主线程回复一条消息。
- 主线程在接收到消息后立即关闭 worker 线程。
大家可以思考一下,主线程会接收到哪些消息呢,控制台会打印出哪些信息呢?
// main.js(主线程)
const myWorker = new Worker('/worker.js'); // 创建 worker
myWorker.addEventListener('message', e => {
console.log(e.data);
myWorker.terminate(); // 关闭 worker
});
myWorker.postMessage('Greeting from Main.js');
// worker.js(worker线程)
self.addEventListener('message', e => {
postMessage('Greeting from Worker');
setTimeout(() => {
console.log('setTimeout run');
postMessage('Greeting from SetTimeout');
});
Promise.resolve().then(() => {
console.log('Promise run');
postMessage('Greeting from Promise');
})
for (let i = 0; i < 1001; i++) {
if (i === 1000) {
console.log('Loop run');
postMessage('Greeting from Loop');
}
}
});
运行结果如下:
-
主线程只会接收到 worker 线程第一次通过
postMessage()
发送的消息,后面的消息不会接收到; -
worker 线程当前 Event Loop 里的任务会继续执行,包括微任务;
-
worker 线程里 setTimeout 创建的下一个 Event Loop 任务队列没有执行。
在 worker 线程内部关闭 worker
对上述例子稍作修改,将关闭 worker 的事件放到 worker 线程内部,大家觉得又会打印出什么呢
// main.js(主线程)
const myWorker = new Worker('/worker.js'); // 创建 worker
myWorker.addEventListener('message', e => {
console.log(e.data);
});
myWorker.postMessage('Greeting from Main.js');
// worker.js(worker线程)
self.addEventListener('message', e => {
postMessage('Greeting from Worker');
self.close(); // 关闭 worker
setTimeout(() => {
console.log('setTimeout run');
postMessage('Greeting from SetTimeout');
});
Promise.resolve().then(() => {
console.log('Promise run');
postMessage('Greeting from Promise');
})
for (let i = 0; i < 1001; i++) {
if (i === 1000) {
console.log('Loop run');
postMessage('Greeting from Loop');
}
}
});
运行结果如下
与在主线程关闭不同的是,worker 线程当前的 Event Loop 任务队列中的 postMessage()
事件都会被主线程监听到。
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');
console.log(add(1, 2)); // log 3
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暴露出去即可
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 |
评论区