一文带你掌握JavaScript中worker的具体使用

JavaScript Web Worker 完全指南：提升前端性能的利器

Web Worker 是 JavaScript 在浏览器中实现多线程的关键技术，能够有效解决复杂计算导致的界面卡顿问题。本文将带你全面掌握 Worker 的使用方法。

1. Web Worker 基础概念

1.1 什么是 Web Worker

Web Worker 允许在后台线程中运行脚本，与主线程并行执行，不阻塞 UI 渲染。

1.2 Worker 的类型

Dedicated Worker：专用 Worker，与单个脚本通信
Shared Worker：共享 Worker，可被多个脚本共享
Service Worker：用于网络代理和离线缓存（本文不深入讨论）

2. 创建和使用 Dedicated Worker

2.1 基础使用

主线程代码 (main.js):

// 创建 Worker
const worker = new Worker('worker.js');

// 向 Worker 发送消息
worker.postMessage('开始计算');

// 接收 Worker 的响应
worker.onmessage = function(event) {
    console.log('Worker 返回结果:', event.data);
    document.getElementById('result').textContent = event.data;
};

// 错误处理
worker.onerror = function(error) {
    console.error('Worker 错误:', error);
    document.getElementById('error').textContent = `错误: ${error.message}`;
};

// 终止 Worker
document.getElementById('stopBtn').addEventListener('click', () => {
    worker.terminate();
    console.log('Worker 已终止');
});

Worker 线程代码 (worker.js):

// 监听主线程的消息
self.onmessage = function(event) {
    console.log('收到主线程消息:', event.data);

    // 执行耗时任务
    const result = heavyCalculation();

    // 发送结果回主线程
    self.postMessage(result);
};

function heavyCalculation() {
    // 模拟耗时计算
    let sum = 0;
    for (let i = 0; i < 1000000000; i++) {
        sum += i;
    }
    return sum;
}

3. 高级 Worker 功能

3.1 传递复杂数据

主线程代码:

const worker = new Worker('worker.js');

// 传递结构化数据
const complexData = {
    type: 'calculation',
    numbers: [1, 2, 3, 4, 5],
    operation: 'multiply'
};

// 使用 Transferable Objects 提高性能
const largeArray = new Uint8Array(1024 * 1024 * 10); // 10MB 数据
worker.postMessage({
    buffer: largeArray,
    operation: 'process'
}, [largeArray.buffer]); // 转移所有权，原线程无法再访问

// 另一种传递方式：复制数据
worker.postMessage(JSON.stringify(complexData));

Worker 代码:

self.onmessage = function(event) {
    // 处理复杂数据
    const data = JSON.parse(event.data);

    if (data.type === 'calculation') {
        let result;
        switch (data.operation) {
            case 'multiply':
                result = data.numbers.reduce((acc, num) => acc * num, 1);
                break;
            case 'sum':
                result = data.numbers.reduce((acc, num) => acc + num, 0);
                break;
        }
        self.postMessage({ result });
    }
};

3.2 创建 Inline Worker（无需单独文件）

// 创建 Worker 的代码字符串
const workerCode = `
    self.onmessage = function(event) {
        const result = fibonacci(event.data);
        self.postMessage(result);
    };

    function fibonacci(n) {
        if (n <= 1) return n;
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
`;

// 创建 Blob URL
const blob = new Blob([workerCode], { type: 'application/javascript' });
const workerURL = URL.createObjectURL(blob);
const worker = new Worker(workerURL);

// 使用 Worker
worker.postMessage(40);

// 清理
worker.onmessage = function(event) {
    console.log('结果:', event.data);
    URL.revokeObjectURL(workerURL);
};

4. Shared Worker 的使用

4.1 创建和连接 Shared Worker

主线程代码:

// 创建 Shared Worker
const worker = new SharedWorker('shared-worker.js', 'my-worker');

// 通过 port 通信
worker.port.onmessage = function(event) {
    console.log('来自 Shared Worker:', event.data);
};

worker.port.postMessage('Hello from tab 1');

// 启动端口连接
worker.port.start();

Shared Worker 代码 (shared-worker.js):

let connections = 0;

// 监听连接
self.onconnect = function(event) {
    const port = event.ports[0];
    connections++;

    port.onmessage = function(event) {
        console.log('收到消息:', event.data);
        // 广播给所有连接
        for (let client of self.clients) {
            client.postMessage(`用户 ${connections}: ${event.data}`);
        }
    };

    port.start();
};

5. 实际应用示例

5.1 图像处理 Worker

主线程代码:

class ImageProcessor {
    constructor() {
        this.worker = new Worker('image-worker.js');
        this.setupListeners();
    }

    setupListeners() {
        this.worker.onmessage = (event) => {
            const { type, data } = event.data;

            switch(type) {
                case 'processed':
                    this.displayImage(data);
                    break;
                case 'progress':
                    this.updateProgress(data);
                    break;
            }
        };
    }

    processImage(imageData, filter) {
        this.worker.postMessage({
            type: 'process',
            imageData: imageData,
            filter: filter
        });
    }
}

图像处理 Worker 代码:

self.onmessage = function(event) {
    const { type, imageData, filter } = event.data;

    if (type === 'process') {
        // 使用 Canvas API 处理图像
        const processed = applyFilter(imageData, filter);
        self.postMessage({ type: 'processed', data: processed });
    }
};

function applyFilter(imageData, filter) {
    const pixels = imageData.data;

    for (let i = 0; i < pixels.length; i += 4) {
        // 根据不同的滤镜处理像素
        switch(filter) {
            case 'grayscale':
                const avg = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
                pixels[i] = pixels[i+1] = pixels[i+2] = avg;
                break;
            case 'invert':
                pixels[i] = 255 - pixels[i];
                pixels[i+1] = 255 - pixels[i+1];
                pixels[i+2] = 255 - pixels[i+2];
                break;
        }

        // 报告进度
        if (i % 40000 === 0) {
            self.postMessage({
                type: 'progress',
                data: Math.round((i / pixels.length) * 100)
            });
        }
    }

    return imageData;
}

5.2 大数据处理 Worker

// 大数据分块处理
class DataProcessor {
    constructor(workerScript) {
        this.worker = new Worker(workerScript);
        this.chunkSize = 10000;
    }

    processLargeData(data) {
        const chunks = this.chunkData(data, this.chunkSize);
        const results = [];
        let completed = 0;

        chunks.forEach((chunk, index) => {
            const worker = new Worker(this.worker.scriptURL);

            worker.onmessage = (event) => {
                results[index] = event.data;
                completed++;

                if (completed === chunks.length) {
                    this.onComplete(results.flat());
                }

                worker.terminate();
            };

            worker.postMessage(chunk);
        });
    }

    chunkData(data, size) {
        const chunks = [];
        for (let i = 0; i < data.length; i += size) {
            chunks.push(data.slice(i, i + size));
        }
        return chunks;
    }
}

6. 最佳实践和注意事项

6.1 性能优化技巧

合理使用 Transferable Objects

// 正确使用
const buffer = new ArrayBuffer(32);
worker.postMessage(buffer, [buffer]); // 转移所有权

// 错误使用
worker.postMessage(buffer); // 复制数据，性能较低

Worker 池化管理

class WorkerPool {
    constructor(script, size = 4) {
        this.workers = [];
        this.queue = [];

        for (let i = 0; i < size; i++) {
            const worker = new Worker(script);
            worker.isBusy = false;
            worker.id = i;
            this.workers.push(worker);
        }
    }

    execute(task) {
        return new Promise((resolve) => {
            const availableWorker = this.workers.find(w => !w.isBusy);

            if (availableWorker) {
                this.runTask(availableWorker, task, resolve);
            } else {
                this.queue.push({ task, resolve });
            }
        });
    }
}

6.2 限制和兼容性

Worker 的限制：

不能直接操作 DOM
不能使用 window 对象
不能访问主线程的变量
可以使用大部分 Web API（XMLHttpRequest, Fetch, IndexedDB 等）

错误处理策略：

worker.onerror = (error) => {
    console.error('Worker 错误:', error);
    // 重启 Worker
    worker.terminate();
    this.initWorker();
};

// 设置超时
setTimeout(() => {
    if (!this.responseReceived) {
        worker.terminate();
        throw new Error('Worker 超时');
    }
}, 5000);

7. 完整示例：斐波那契计算器

<!DOCTYPE html>
<html>
<head>
    <title>Worker 示例</title>
</head>
<body>
    <h1>Web Worker 斐波那契计算器</h1>
    <input type="number" id="numberInput" value="40" min="1" max="50">
    <button id="calculateBtn">计算</button>
    <button id="calculateWithoutWorkerBtn">无 Worker 计算</button>
    <div id="result"></div>
    <div id="status"></div>
    <div id="time"></div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('numberInput');
            const btn = document.getElementById('calculateBtn');
            const btnWithout = document.getElementById('calculateWithoutWorkerBtn');
            const resultDiv = document.getElementById('result');
            const statusDiv = document.getElementById('status');
            const timeDiv = document.getElementById('time');

            // 创建 Worker
            const workerCode = `
                self.onmessage = function(event) {
                    const n = event.data;
                    const startTime = performance.now();
                    const result = fibonacci(n);
                    const endTime = performance.now();

                    self.postMessage({
                        result: result,
                        time: endTime - startTime
                    });
                };

                function fibonacci(n) {
                    if (n <= 1) return n;
                    return fibonacci(n - 1) + fibonacci(n - 2);
                }
            `;

            const blob = new Blob([workerCode], { type: 'application/javascript' });
            const workerURL = URL.createObjectURL(blob);

            btn.addEventListener('click', () => {
                const n = parseInt(input.value);
                statusDiv.textContent = '使用 Worker 计算中...';
                resultDiv.textContent = '';
                timeDiv.textContent = '';

                const worker = new Worker(workerURL);
                const startTime = performance.now();

                worker.onmessage = function(event) {
                    const endTime = performance.now();
                    const totalTime = endTime - startTime;

                    resultDiv.textContent = \`结果: \${event.data.result}\`;
                    timeDiv.innerHTML = \`
                        Worker 计算时间: \${event.data.time.toFixed(2)}ms<br>
                        总时间: \${totalTime.toFixed(2)}ms
                    \`;
                    statusDiv.textContent = '计算完成！';

                    worker.terminate();
                };

                worker.postMessage(n);
            });

            btnWithout.addEventListener('click', () => {
                const n = parseInt(input.value);
                statusDiv.textContent = '无 Worker 计算中（界面会卡顿）...';

                const startTime = performance.now();
                const result = fibonacci(n);
                const endTime = performance.now();

                resultDiv.textContent = \`结果: \${result}\`;
                timeDiv.textContent = \`计算时间: \${(endTime - startTime).toFixed(2)}ms\`;
                statusDiv.textContent = '计算完成！';
            });

            function fibonacci(n) {
                if (n <= 1) return n;
                return fibonacci(n - 1) + fibonacci(n - 2);
            }

            // 清理
            window.addEventListener('beforeunload', () => {
                URL.revokeObjectURL(workerURL);
            });
        });
    </script>
</body>
</html>