深入理解 Web Worker：Web 前端多线程实战

注意这里使用了 self 来引用全局对象，因为在 Worker 环境中 window 不可用。

2. 在主线程中调用

在 main.js 中实例化 Worker 并建立通信。

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

// 发送数据给 Worker
worker.postMessage(1000000);

// 接收 Worker 返回的结果
worker.onmessage = function(e) {
    console.log('计算结果:', e.data);
};

// 处理 Worker 错误
worker.onerror = function(e) {
    console.error('Worker 错误:', e.message);
};

// 不需要时及时终止
worker.terminate();

实际应用示例

示例 1：斐波那契数列计算

递归计算大数阶乘或斐波那契数列非常消耗 CPU，放在主线程会卡死页面。

// fibonacci-worker.js
self.onmessage = function(e) {
    const n = e.data;
    const result = fibonacci(n);
    self.postMessage(result);
};

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

// main.js
const fibonacciWorker = new Worker('fibonacci-worker.js');
const n = 40;

fibonacciWorker.onmessage = function(e) {
    console.log(`斐波那契数列第 ${n} 项是: ${e.data}`);
};

fibonacciWorker.postMessage(n);

示例 2：图片处理

图像处理涉及大量像素运算，非常适合交给 Worker。

// image-processor-worker.js
self.onmessage = function(e) {
    const imageData = e.data;
    const processedData = processImage(imageData);
    // 关键：使用 transferable objects 传输 ArrayBuffer
    self.postMessage(processedData, [processedData.data.buffer]);
};

function processImage(imageData) {
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        // 灰度化处理
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg;     // R
        data[i + 1] = avg; // G
        data[i + 2] = avg; // B
    }
    return imageData;
}

// main.js
const imageWorker = new Worker('image-processor-worker.js');

function processImageElement(imageElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imageElement.width;
    canvas.height = imageElement.height;
    ctx.drawImage(imageElement, 0, 0);
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    imageWorker.onmessage = function(e) {
        ctx.putImageData(e.data, 0, 0);
        imageElement.src = canvas.toDataURL();
    };
    
    // 传输 buffer 所有权，提高性能
    imageWorker.postMessage(imageData, [imageData.data.buffer]);
}

示例 3：批量数据处理

处理大型数据集时，可以封装 Promise 方便异步调用。

// data-processor-worker.js
self.onmessage = function(e) {
    const { data, operation } = e.data;
    const result = processData(data, operation);
    self.postMessage(result);
};

function processData(data, operation) {
    switch (operation) {
        case 'filter':
            return data.filter(item => item.value > 100);
        case 'sort':
            return [...data].sort((a, b) => a.value - b.value);
        case 'aggregate':
            return data.reduce((acc, item) => acc + item.value, 0);
        default:
            return data;
    }
}

// main.js
const dataWorker = new Worker('data-processor-worker.js');

function processLargeDataset(data, operation) {
    return new Promise((resolve) => {
        dataWorker.onmessage = function(e) {
            resolve(e.data);
        };
        dataWorker.postMessage({ data, operation });
    });
}

// 使用示例
const largeDataset = generateLargeDataset(100000);
processLargeDataset(largeDataset, 'filter').then(result => {
    console.log('过滤结果:', result);
});

高级应用场景

1. 实时数据分析

对于流式数据，可以在 Worker 内部维护缓冲区，定期聚合分析。

// analytics-worker.js
let dataBuffer = [];
let analysisInterval;

self.onmessage = function(e) {
    switch (e.data.type) {
        case 'start':
            startAnalysis(e.data.interval);
            break;
        case 'stop':
            stopAnalysis();
            break;
        case 'data':
            dataBuffer.push(e.data.value);
            break;
    }
};

function startAnalysis(interval) {
    analysisInterval = setInterval(() => {
        const analysis = analyzeData(dataBuffer);
        self.postMessage({ type: 'analysis', data: analysis });
        dataBuffer = [];
    }, interval);
}

function stopAnalysis() {
    clearInterval(analysisInterval);
}

function analyzeData(data) {
    return {
        count: data.length,
        average: data.reduce((a, b) => a + b, 0) / data.length,
        max: Math.max(...data),
        min: Math.min(...data)
    };
}

2. WebSocket 连接管理

将网络请求隔离在 Worker 中，可以避免主线程被长连接占用，同时便于统一管理重连逻辑。

// websocket-worker.js
let ws;
let reconnectAttempts = 0;
const MAX_RECONNECT_ATTEMPTS = 5;

self.onmessage = function(e) {
    const { type, url, message } = e.data;
    switch (type) {
        case 'connect':
            connect(url);
            break;
        case 'send':
            send(message);
            break;
        case 'disconnect':
            disconnect();
            break;
    }
};

function connect(url) {
    ws = new WebSocket(url);
    ws.onopen = function() {
        reconnectAttempts = 0;
        self.postMessage({ type: 'connected' });
    };
    ws.onmessage = function(e) {
        self.postMessage({ type: 'message', data: e.data });
    };
    ws.onclose = function() {
        self.postMessage({ type: 'disconnected' });
        if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
            setTimeout(() => {
                reconnectAttempts++;
                connect(url);
            }, 1000 * reconnectAttempts);
        }
    };
    ws.onerror = function(error) {
        self.postMessage({ type: 'error', error: error.message });
    };
}

function send(message) {
    if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(message);
    }
}

function disconnect() {
    if (ws) {
        ws.close();
    }
}

3. 后台文件处理

结合第三方库处理 CSV 或 JSON 文件，避免解析过程阻塞 UI。

// file-processor-worker.js
self.importScripts('https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js');

self.onmessage = function(e) {
    const { file, type } = e.data;
    switch (type) {
        case 'parseCSV':
            parseCSV(file);
            break;
        case 'processJSON':
            processJSON(file);
            break;
    }
};

function parseCSV(file) {
    Papa.parse(file, {
        worker: true,
        step: function(row) {
            self.postMessage({ type: 'row', data: row.data });
        },
        complete: function() {
            self.postMessage({ type: 'complete' });
        },
        error: function(error) {
            self.postMessage({ type: 'error', error: error.message });
        }
    });
}

function processJSON(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const data = JSON.parse(e.target.result);
            const processed = processData(data);
            self.postMessage({ type: 'result', data: processed });
        } catch (error) {
            self.postMessage({ type: 'error', error: error.message });
        }
    };
    reader.readAsText(file);
}

Worker 的通信机制

1. 基本消息传递

这是最基础的方式，数据会被序列化后复制。

// 主线程
worker.postMessage({ type: 'task', data: { value: 100 } });

// Worker
self.onmessage = function(e) {
    const { type, data } = e.data;
    // 处理消息
};

2. Transferable Objects

对于大数据量（如 ImageData、ArrayBuffer），使用可转移对象可以避免拷贝，直接将所有权移交给 Worker。

// 主线程
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);

// Worker
self.onmessage = function(e) {
    const buffer = e.data;
    // 此时原 buffer 已失效，可直接使用
};

3. 消息通道

如果需要双向通信或端口复用，可以使用 MessageChannel。

// 主线程
const channel = new MessageChannel();
worker.postMessage({ port: channel.port2 }, [channel.port2]);
channel.port1.onmessage = function(e) {
    console.log('收到消息:', e.data);
};

// Worker
self.onmessage = function(e) {
    const port = e.data.port;
    port.onmessage = function(e) {
        console.log('收到消息:', e.data);
        port.postMessage('回复消息');
    };
};

性能优化建议

1. 合理划分任务：将大任务拆分为小任务，避免 Worker 长时间占用资源导致系统卡顿。
2. 使用 Transferable Objects：减少数据拷贝，特别是处理二进制数据时效果显著。
3. 及时终止 Worker：任务完成后调用 terminate() 释放内存资源。
4. 避免频繁通信：减少主线程和 Worker 之间的消息传递次数，尽量批量发送。
5. 批量处理数据：将多个小任务合并为一个批量任务处理，降低通信开销。
6. 使用 SharedArrayBuffer：在支持的浏览器中使用共享内存，实现真正的零拷贝共享。

注意事项

1. 同源策略：Worker 只能加载同源的脚本，跨域资源需配置 CORS。
2. 无 DOM 访问：Worker 无法直接操作 DOM，所有 UI 更新必须通过主线程。
3. 调试困难：Worker 的调试相对复杂，建议使用 Chrome DevTools 的 Workers 面板。
4. 内存消耗：创建过多 Worker 会增加内存消耗，按需创建。
5. 浏览器兼容性：虽然现代浏览器支持良好，但老旧版本可能不支持。
6. 错误处理：需要妥善处理 Worker 中的错误，防止静默失败。

总结

Web Worker 为 JavaScript 带来了真正的多线程能力，使我们能够在 Web 应用中高效地处理复杂任务和大量数据。通过合理使用 Web Worker，我们可以显著提升应用性能，改善用户体验，并构建更高效的应用程序。掌握其通信机制与性能优化技巧，将使你的前端开发技能更上一层楼。

参考资料

• MDN - Web Workers API
• W3C - Web Workers 规范
• Google Developers - Web Workers