基于Web Workers的前端多线程任务优化实践

graph TD
    A[主线程] --> B{任务队列}
    B --> C[Worker线程1]
    B --> D[Worker线程2]
    C --> E[计算结果]
    D --> F[计算结果]
    E --> A
    F --> A

// geo-worker.js
self.onmessage = function(e) {
    const { points, zoomLevel } = e.data;
    const processedPoints = points.map(point => {
        // 复杂的坐标转换算法
        return {
            x: point.lng * zoomLevel,
            y: point.lat * zoomLevel,
            visible: zoomLevel > 12 ? true : false
        };
    });
    self.postMessage(processedPoints);
};

class WorkerManager {
    constructor(maxWorkers) {
        this.workers = [];
        this.taskQueue = [];
        for(let i=0; i<maxWorkers; i++) {
            this.workers.push(new Worker('geo-worker.js'));
        }
    }

    enqueueTask(task) {
        this.taskQueue.push(task);
        this.checkQueue();
    }

    checkQueue() {
        this.workers.forEach(worker => {
            if(worker.state === 'idle' && this.taskQueue.length > 0) {
                const task = this.taskQueue.shift();
                worker.postMessage(task);
            }
        });
    }
}