Web Worker 入门

彭水晶 · 前天 19:17

Worker 是一个使用构造函数创建的对象（例如 Worker()），它运行一个具名 JavaScript 文件——该文件包含将在 worker 线程中运行的代码。数据通过消息系统在 worker 和主线程之间发送——双方都使用 postMessage() 方法发送消息，并通过 onmessage 事件处理程序响应消息（消息包含在 message 事件的 data 属性中）。数据是复制的，而不是共享的。
—— MDN

用一个简单的例子初识Web Worker，需要一个html+一个js，在页面中放上两个input元素+按钮+结果input，用来模拟一个费力耗时的计算工作，点击按钮计算并显示结果。工程结构如下图:

下面是Html页面完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Web worker practice</title>
</head>
<body>
<h2>当前页面是针对 Web Worker 的练习，点击按钮，两个加数通过消息发送到 Web Worker 进行计算，计算结果通过消息发送回主线程显示。</h2>
<label>
<input name="input-val1" type="number" value="1"/>
</label>
<label>
<input name="input-val2" type="number" value="1"/>
</label>
<button name="btn-calc">计算</button>
<label>
<input type="text" name="input-result" value=""/>
</label>
</body>
</html>

复制代码

下面是js完整代码

onmessage = function(e) {
console.log('子线程收到消息', e.data);
const {type, data} = e.data;
if(type === 'add'){
const ret = data.val1 + data.val2 - 0;
// 向主线程发送（结果）消息
postMessage({
type: 'add',
data: ret
})
}
}

复制代码

正如MDN解释，主线程（html线程）创建了Web Worker子线程并加载目标jsworker.js，当按钮触发click事件时，包装两个加数并向woker线程通过worker.postMessage发送消息，子线程通过onmessage接收消息并完成运算，通过相同方式向主线程发送结果，主线程侦听消息并显示。效果图如下：

MDN Web Worker API
Bilibili 06.使用WebWorker线程执行代码任务

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

Web Worker 入门

浏览过的版块

签约作者