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>
<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接收消息并完成运算，通过相同方式向主线程发送结果，主线程侦听消息并显示。效果图如下：