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>
<div><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>
</div>
<script>const worker = new Worker('worker.js');const num1 = document.querySelector('input[name="input-val1"]');const num2 = document.querySelector('input[name="input-val2"]');const result = document.querySelector('input[name="input-result"]');const btn = document.querySelector('button[name="btn-calc"]');btn.addEventListener('click', function () {const val1 = num1.value - 0;const val2 = num2.value - 0;console.log('开始计算');// 向子线程发送消息worker.postMessage({type: 'add',data: {val1, val2}});});// 监听来自子线程的消息事件worker.addEventListener('message', e =>{console.log('主线程收到消息', e.data);const {type, data} = e.data;if( type === 'add'){result.value = data;}});</script>
</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接收消息并完成运算，通过相同方式向主线程发送结果，主线程侦听消息并显示。效果图如下：
关注灵活就业新业态，关注公账号：贤才宝（贤才宝https://www.51xcbw.com）