MDN的介绍为:
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,它们可以使用
XMLHttpRequest
(尽管responseXML
和channel
属性总是为空)或fetch
(没有这些限制)执行 I/O。一旦创建,一个 worker 可以将消息发送到创建它的 JavaScript 代码,通过将消息发布到该代码指定的事件处理器(反之亦然)。
简单来说就是, 我们可以通过使用worker为主线程分担数据处理压力.
假如说你有一段很大的数据需要处理, 而你又不想这段程序阻碍你的其他操作,这时候就可以考虑一下webWorker.
先创建一个worker.js文件, 该文件为线程代码文件, 文件中的代码会在后台线程中运行.
在主线程中创建一个worker, 通过类似通讯的方式在主线程和worker中进行数据传递.
// index.js主线程代码块
// 简单创建一个worker名为myworker
let myworker = new Worker("./firstworker.js") // 参数为firstworker.js文件的路径
主线程发送数据给worker: 在主线程中通过 worker.prototype.postMessage()
进行通信
// index.js主线程代码块
// ... 创建完worker
console.log("主线程我说句话先,接下来你要替我干活了.");
// 简单向worker中发送一个数组[1, 2, 3]
myworker.postMessage([1, 2, 3]);
worker接收来自主线程的数据: 在myworker.js中接收数据
// firstworker.js代码块
// 接收来自主线程的数据,数组[1, 2, 3]
onmessage = function recive(msg) {
// 接收到的是一个MessageEvent对象, 我们可以获取data属性
console.log(msg.data); // 输出[1, 2, 3]
};
我们也可以使用更简洁的方式
// firstworker.js代码块
// 使用解构和匿名箭头函数
onmessage = ({ data }) => {
console.log(data); // 输出[1, 2, 3]
};
worker发送数据给主线程: 通过 postMessage()
发送数据给主线程 index.js
接收到数组[1, 2, 3]之后, 我们可以简单的对数组进行一个逆序操作, 再把结果返回主线程
// firstworker.js代码块
onmessage = ({ data }) => {
// 主线程发来的数据
console.log("主线程发来的数据:", data);
// 赋值一个新变量newdata
let newdata = data;
// 对新变量操作(数组逆序)
newdata.sort((a, b) => {
return b - a;
});
console.log("worker后台线程处理完成的数据newdata:", newdata);
// 处理完的结果递交给主线程
postMessage(newdata);
};
主线程接收worker讯息: 通过 addEventListener()
对worker的动作进行监听
// index.js主线程代码块
// 主线程通过 监听 实例的message事件获取worker的数据
// 接收myworker处理之后的结果
myworker.addEventListener("message", ({ data }) => {
console.log("接收到来自worker处理完的数据:", data);
});
worker.terminate()
可以帮助我们在主线程中随意关闭线程, 即为从主线程中立刻终止一个运行中的 worker
// index.js主线程代码块
// 3s后关闭线程
setTimeout(() => {
console.log("关闭myworker,你别说话了")
myWorker.terminate();
}, 3000);
// firstworker.js代码块
setTimeout(() => {
console.log("4秒时让我说句话")
}, 4000);
主线程通过 addEventListener()
对worker动作进行监听, 动作包含三种
参与评论
手机查看
返回顶部