Web Worker 入门-牛翰网

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

用一个简单的例子初识Web Worker，需要一个html+一个js，在页面中放上两个input元素+按钮+结果input，用来模拟一个费力耗时的计算工作，点击按钮计算并显示结果。工程结构如下图:
图片[1]-Web Worker 入门-牛翰网
下面是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接收消息并完成运算，通过相同方式向主线程发送结果，主线程侦听消息并显示。效果图如下：