JavaScript系列（39）-- Web Workers技術詳解

JavaScript Web Workers技術詳解 🔄

今天，讓我們深入了解Web Workers技術，這是一種能夠在后臺線程中運行腳本的強大特性，可以避免阻塞主線程，提升Web應用的性能和響應性。

Web Workers基礎概念 🌟

💡 小知識：Web Workers允許在瀏覽器中運行后臺線程，可以執行計算密集型任務而不影響用戶界面的響應性。它們通過消息傳遞機制與主線程通信，不能直接訪問DOM。

基本實現 📊

// 1. Worker基礎實現
// main.js
class WorkerManager {constructor(workerScript) {this.worker = new Worker(workerScript);this.setupEventListeners();}setupEventListeners() {this.worker.onmessage = (event) => {console.log('Received from worker:', event.data);};this.worker.onerror = (error) => {console.error('Worker error:', error);};}sendMessage(data) {this.worker.postMessage(data);}terminate() {this.worker.terminate();}
}// worker.js
self.onmessage = (event) => {const result = processData(event.data);self.postMessage(result);
};function processData(data) {// 處理數據的邏輯return data.map(x => x * 2);
}// 2. 共享Worker實現
// shared-worker.js
const connections = new Set();self.onconnect = (event) => {const port = event.ports[0];connections.add(port);port.onmessage = (e) => {// 廣播消息給所有連接for (const connection of connections) {connection.postMessage(e.data);}};port.start();
};// 3. Worker Pool實現
class WorkerPool {constructor(workerScript, poolSize = 4) {this.workers = [];this.queue = [];this.activeWorkers = new Set();for (let i = 0; i < poolSize; i++) {const worker = new Worker(workerScript);this.setupWorker(worker);this.workers.push(worker);}}setupWorker(worker) {worker.onmessage = (event) => {this.handleTaskCompletion(worker, event.data);};worker.onerror = (error) => {console.error('Worker error:', error);this.handleTaskCompletion(worker, null, error);};}handleTaskCompletion(worker, result, error = null) {const task = this.activeWorkers.get(worker);if (task) {if (error) {task.reject(error);} else {task.resolve(result);}this.activeWorkers.delete(worker);}this.processNextTask(worker);}processNextTask(worker) {if (this.queue.length > 0) {const task = this.queue.shift();this.executeTask(worker, task);}}executeTask(worker, task) {this.activeWorkers.set(worker, task);worker.postMessage(task.data);}async execute(data) {return new Promise((resolve, reject) => {const task = { data, resolve, reject };const availableWorker = this.workers.find(w => !this.activeWorkers.has(w));if (availableWorker) {this.executeTask(availableWorker, task);} else {this.queue.push(task);}});}terminate() {this.workers.forEach(worker => worker.terminate());this.workers = [];this.queue = [];this.activeWorkers.clear();}
}

高級功能實現 🚀

// 1. 可轉移對象處理
class TransferableWorkerManager {constructor(workerScript) {this.worker = new Worker(workerScript);}async processArrayBuffer(buffer) {return new Promise((resolve, reject) => {this.worker.onmessage = (event) => {resolve(event.data);};this.worker.onerror = (error) => {reject(error);};// 轉移ArrayBuffer所有權this.worker.postMessage({ buffer }, [buffer]);});}async processImageData(imageData) {return new Promise((resolve, reject) => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = imageData.width;canvas.height = imageData.height;ctx.putImageData(imageData, 0, 0);canvas.toBlob((blob) => {const reader = new FileReader();reader.onload = () => {const buffer = reader.result;this.worker.postMessage({ buffer }, [buffer]);};reader.readAsArrayBuffer(blob);});this.worker.onmessage = (event) => {resolve(new ImageData(new Uint8ClampedArray(event.data.buffer),imageData.width,imageData.height));};});}
}// 2. 錯誤處理和恢復
class ResilientWorker {constructor(workerScript, options = {}) {this.workerScript = workerScript;this.options = {maxRetries: 3,retryDelay: 1000,...options};this.createWorker();}createWorker() {this.worker = new Worker(this.workerScript);this.setupEventListeners();}setupEventListeners() {this.worker.onerror = (error) => {this.handleError(error);};}async handleError(error) {console.error('Worker error:', error);if (this.options.maxRetries > 0) {this.options.maxRetries--;await new Promise(resolve => setTimeout(resolve, this.options.retryDelay));this.restartWorker();} else {throw new Error('Worker failed after max retries');}}restartWorker() {this.worker.terminate();this.createWorker();}async execute(task) {return new Promise((resolve, reject) => {const timeoutId = setTimeout(() => {reject(new Error('Worker timeout'));this.restartWorker();}, this.options.timeout || 30000);this.worker.onmessage = (event) => {clearTimeout(timeoutId);resolve(event.data);};this.worker.postMessage(task);});}
}// 3. 狀態管理
class StatefulWorker {constructor(workerScript) {this.worker = new Worker(workerScript);this.state = new Map();this.setupEventListeners();}setupEventListeners() {this.worker.onmessage = (event) => {const { type, payload } = event.data;switch (type) {case 'STATE_UPDATE':this.updateState(payload);break;case 'STATE_REQUEST':this.sendState();break;default:this.handleMessage(event.data);}};}updateState(changes) {for (const [key, value] of Object.entries(changes)) {this.state.set(key, value);}this.notifyStateChange();}sendState() {const stateObj = {};for (const [key, value] of this.state) {stateObj[key] = value;}this.worker.postMessage({type: 'STATE_SYNC',payload: stateObj});}notifyStateChange() {if (this.onStateChange) {const stateObj = {};for (const [key, value] of this.state) {stateObj[key] = value;}this.onStateChange(stateObj);}}
}

性能優化技巧 ?

// 1. 任務分片處理
class TaskChunker {constructor(chunkSize = 1000) {this.chunkSize = chunkSize;}*splitTask(data) {for (let i = 0; i < data.length; i += this.chunkSize) {yield data.slice(i, Math.min(i + this.chunkSize, data.length));}}async processWithWorker(worker, data) {const results = [];for (const chunk of this.splitTask(data)) {const result = await new Promise((resolve, reject) => {worker.onmessage = (e) => resolve(e.data);worker.onerror = (e) => reject(e);worker.postMessage(chunk);});results.push(result);}return results.flat();}
}// 2. Worker緩存優化
class CachedWorker {constructor(workerScript) {this.worker = new Worker(workerScript);this.cache = new Map();this.setupCache();}setupCache() {this.worker.onmessage = (event) => {const { id, result } = event.data;const resolver = this.cache.get(id);if (resolver) {resolver(result);this.cache.delete(id);}};}async execute(task) {const taskId = this.generateTaskId(task);const cachedResult = this.cache.get(taskId);if (cachedResult) {return cachedResult;}return new Promise((resolve) => {this.cache.set(taskId, resolve);this.worker.postMessage({ id: taskId, task });});}generateTaskId(task) {return JSON.stringify(task);}
}// 3. 資源管理優化
class WorkerResourceManager {constructor() {this.resources = new Map();this.maxMemory = 100 * 1024 * 1024; // 100MBthis.currentMemory = 0;}allocate(size) {if (this.currentMemory + size > this.maxMemory) {this.cleanup();}if (this.currentMemory + size > this.maxMemory) {throw new Error('Insufficient memory');}const buffer = new ArrayBuffer(size);this.resources.set(buffer, size);this.currentMemory += size;return buffer;}release(buffer) {const size = this.resources.get(buffer);if (size) {this.currentMemory -= size;this.resources.delete(buffer);}}cleanup() {// 釋放最舊的資源const entries = Array.from(this.resources.entries());entries.sort((a, b) => a[1] - b[1]);while (entries.length > 0 && this.currentMemory > this.maxMemory * 0.8) {const [buffer, size] = entries.shift();this.release(buffer);}}
}

最佳實踐建議 💡

錯誤處理和監控

// 1. Worker錯誤處理器
class WorkerErrorHandler {static handle(error, context) {console.error(`Error in ${context}:`, error);if (error instanceof TypeError) {return this.handleTypeError(error);}if (error.message.includes('quota exceeded')) {return this.handleQuotaError(error);}return this.handleGenericError(error);}static handleTypeError(error) {return {type: 'type_error',message: error.message,recoverable: true};}static handleQuotaError(error) {return {type: 'quota_error',message: 'Memory quota exceeded',recoverable: false};}static handleGenericError(error) {return {type: 'generic_error',message: error.message,recoverable: true};}
}// 2. Worker監控
class WorkerMonitor {constructor() {this.metrics = new Map();this.startTime = Date.now();}recordMetric(workerId, metric) {if (!this.metrics.has(workerId)) {this.metrics.set(workerId, []);}this.metrics.get(workerId).push({timestamp: Date.now(),...metric});}getWorkerMetrics(workerId) {const metrics = this.metrics.get(workerId) || [];return {totalTasks: metrics.length,averageTaskTime: this.calculateAverageTime(metrics),errorRate: this.calculateErrorRate(metrics),throughput: this.calculateThroughput(metrics)};}calculateAverageTime(metrics) {const times = metrics.filter(m => m.duration).map(m => m.duration);return times.reduce((a, b) => a + b, 0) / times.length;}calculateErrorRate(metrics) {const errors = metrics.filter(m => m.error).length;return errors / metrics.length;}calculateThroughput(metrics) {const timeRange = Date.now() - this.startTime;return metrics.length / (timeRange / 1000);}
}// 3. 安全策略
class WorkerSecurity {constructor() {this.allowedOrigins = new Set();this.maxPayloadSize = 10 * 1024 * 1024; // 10MB}validateMessage(message) {if (this.exceedsPayloadSize(message)) {throw new Error('Message exceeds maximum size');}if (!this.isValidContent(message)) {throw new Error('Invalid message content');}return true;}exceedsPayloadSize(message) {const size = new Blob([JSON.stringify(message)]).size;return size > this.maxPayloadSize;}isValidContent(message) {// 實現消息內容驗證邏輯return true;}
}