简单示例

耗时任务：输入一个值，得到0到这个值的和
同步按钮：执行两次耗时任务，展示二者之和，得到计算时间syncCost
worker按钮：主线程执行一次耗时任务，worker线程执行一次，展示二者之和，得到计算时间workerCost

index.html，ui页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="number">
    <div>
        <span>计算结果为：</span>
        <h2 class="result"></h2>
    </div>
    <button class="syncBtn">sync calculate</button>
    <button class="workerBtn">worker calculate</button>
    <script src="./index.js"></script>
</body>
</html>

主线程index.js

/**
 * 模拟耗时任务：输入一个值，得到0到这个值的和
 * 同步按钮：执行两次耗时任务，展示二者之和，得到计算时间syncCost
 * worker按钮：主线程执行一次耗时任务，worker线程执行一次，展示二者之和，得到计算时间workerCost
 */
const syncBtn = document.querySelector('.syncBtn');
const workerBtn = document.querySelector('.workerBtn');

const input = document.querySelector('input');
const resultArea = document.querySelector('.result');

const worker = new Worker('./worker/index.js')

let result = 0;

syncBtn.addEventListener('click', function() {
    console.time('syncCost');
    result += costFn(input.value);
    result += costFn(input.value);
    console.timeEnd('syncCost');
});

workerBtn.addEventListener('click', function() {
    console.time('workerCost')
    worker.postMessage(input.value);
    result = costFn(input.value);
});

worker.onmessage = (e) => {
    result += e.data;
    resultArea.innerText = result;
    console.timeEnd('workerCost');
}

const costFn = (num) => {
    let result = 0;
    for(let i = 0; i < num; i++) {
        result += i;
    }
    return result
}

worker线程 worker/index.js

onmessage = (e) => {
    console.log('message recived form main script', e.data);
    const result = costFn(e.data);
    postMessage(result);
}

const costFn = (num) => {
    let result = 0;
    for(let i = 0; i < num; i++) {
        result += i;
    }
    return result
}

使用worker线程几乎只有同步计算的一半耗时

Web Worker

简单示例