Web Worker 入门
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线程执行代码任务
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢分享，下载保存了，貌似很强大 很好很强大我过来先占个楼 待编辑 用心讨论，共获提升！ 感谢分享，下载保存了，貌似很强大 这个有用。 谢谢楼主提供！ 不错，里面软件多更新就更好了 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 热心回复！ 感谢，下载保存了 感谢，下载保存了 感谢分享，学习下。 收藏一下 不知道什么时候能用到 热心回复！ 过来提前占个楼 感谢，下载保存了 东西不错很实用谢谢分享 收藏一下 不知道什么时候能用到 感谢，下载保存了
页:
[1]
2