Web Workers dla ciężkich obliczeń

Web Workers to technologia umożliwiająca wykonywanie JavaScript w osobnych wątkach, niezależnie od głównego wątku UI (User Interface). Pozwala to na przeprowadzanie ciężkich obliczeń bez blokowania interfejsu użytkownika, co jest kluczowe dla utrzymania responsywności aplikacji webowych.

Dlaczego Web Workers są potrzebne?

Problem jednowątkowej natury JavaScript

1// Problem: Blokujące obliczenia w głównym wątku
2function heavyCalculation(n) {
3  console.log('Rozpoczynanie ciężkich obliczeń...');
4  
5  // Symulacja intensywnych obliczeń
6  let result = 0;
7  for (let i = 0; i < n; i++) {
8    for (let j = 0; j < 1000000; j++) {
9      result += Math.sqrt(i * j);
10    }
11  }
12  
13  console.log('Obliczenia zakończone');
14  return result;
15}
16
17// To zablokuje UI na kilka sekund!
18document.getElementById('calculate-button').addEventListener('click', () => {
19  const result = heavyCalculation(5000);
20  document.getElementById('result').textContent = result;
21});
22
23// Podczas obliczeń użytkownik nie może:
24// - Kliknąć innych przycisków
25// - Przewijać strony
26// - Używać animacji
27// - Wpisywać tekst w formularze

Porównanie wydajności

1// Benchmark: Main Thread vs Web Worker
2const performanceTest = {
3  // Test bez Web Worker - blokuje UI
4  async testMainThread() {
5    console.time('Main Thread Calculation');
6    
7    const start = performance.now();
8    const result = this.calculatePrimes(100000);
9    const end = performance.now();
10    
11    console.timeEnd('Main Thread Calculation');
12    
13    return {
14      result: result.length,
15      time: end - start,
16      blocked: true
17    };
18  },
19  
20  // Test z Web Worker - nie blokuje UI
21  async testWebWorker() {
22    console.time('Web Worker Calculation');
23    
24    const start = performance.now();
25    const result = await this.calculatePrimesWorker(100000);
26    const end = performance.now();
27    
28    console.timeEnd('Web Worker Calculation');
29    
30    return {
31      result: result.length,
32      time: end - start,
33      blocked: false
34    };
35  },
36  
37  calculatePrimes(max) {
38    const primes = [];
39    for (let i = 2; i <= max; i++) {
40      if (this.isPrime(i)) {
41        primes.push(i);
42      }
43    }
44    return primes;
45  },
46  
47  isPrime(num) {
48    for (let i = 2; i <= Math.sqrt(num); i++) {
49      if (num % i === 0) return false;
50    }
51    return true;
52  }
53};

Podstawowe implementacje Web Workers

1. Tworzenie prostego Web Worker

1// main.js - główny wątk
2class WebWorkerManager {
3  constructor() {
4    this.worker = null;
5    this.setupWorker();
6  }
7  
8  setupWorker() {
9    // Sprawdzenie wsparcia dla Web Workers
10    if (typeof Worker !== 'undefined') {
11      this.worker = new Worker('worker.js');
12      
13      // Obsługa wiadomości z worker
14      this.worker.onmessage = (event) => {
15        this.handleWorkerMessage(event.data);
16      };
17      
18      // Obsługa błędów
19      this.worker.onerror = (error) => {
20        console.error('Worker error:', error);
21      };
22      
23      console.log('Web Worker został utworzony');
24    } else {
25      console.warn('Web Workers nie są wspierane w tej przeglądarce');
26    }
27  }
28  
29  // Wysyłanie zadania do worker
30  sendTask(taskType, data) {
31    if (this.worker) {
32      this.worker.postMessage({
33        type: taskType,
34        data: data,
35        timestamp: Date.now()
36      });
37    }
38  }
39  
40  // Obsługa odpowiedzi z worker
41  handleWorkerMessage(message) {
42    switch (message.type) {
43      case 'CALCULATION_COMPLETE':
44        this.displayResult(message.result);
45        break;
46      case 'PROGRESS_UPDATE':
47        this.updateProgress(message.progress);
48        break;
49      case 'ERROR':
50        this.handleError(message.error);
51        break;
52    }
53  }
54  
55  // Zakończenie pracy worker
56  terminateWorker() {
57    if (this.worker) {
58      this.worker.terminate();
59      this.worker = null;
60      console.log('Web Worker został zakończony');
61    }
62  }
63}
64
65// Użycie
66const workerManager = new WebWorkerManager();
67
68// Wysłanie zadania obliczeń
69document.getElementById('start-calculation').addEventListener('click', () => {
70  workerManager.sendTask('CALCULATE_PRIMES', { max: 100000 });
71});

2. Implementacja worker.js

1// worker.js - kod wykonywany w osobnym wątku
2class WorkerCalculations {
3  constructor() {
4    this.setupMessageHandler();
5  }
6  
7  setupMessageHandler() {
8    // Główny handler wiadomości z głównego wątku
9    self.onmessage = (event) => {
10      const { type, data, timestamp } = event.data;
11      
12      try {
13        this.handleTask(type, data, timestamp);
14      } catch (error) {
15        this.sendError(error.message);
16      }
17    };
18  }
19  
20  handleTask(type, data, timestamp) {
21    switch (type) {
22      case 'CALCULATE_PRIMES':
23        this.calculatePrimes(data.max);
24        break;
25      case 'PROCESS_IMAGE':
26        this.processImage(data.imageData);
27        break;
28      case 'SORT_LARGE_ARRAY':
29        this.sortArray(data.array);
30        break;
31      case 'MONTE_CARLO_PI':
32        this.calculatePiMonteCarlo(data.iterations);
33        break;
34      default:
35        this.sendError(`Unknown task type: ${type}`);
36    }
37  }
38  
39  // Obliczanie liczb pierwszych z raportowaniem postępu
40  calculatePrimes(max) {
41    const primes = [];
42    const updateInterval = Math.floor(max / 100); // Update co 1%
43    
44    for (let i = 2; i <= max; i++) {
45      if (this.isPrime(i)) {
46        primes.push(i);
47      }
48      
49      // Raportowanie postępu
50      if (i % updateInterval === 0) {
51        const progress = (i / max) * 100;
52        this.sendProgress(progress);
53      }
54    }
55    
56    this.sendResult('CALCULATION_COMPLETE', {
57      primes: primes,
58      count: primes.length,
59      executionTime: performance.now()
60    });
61  }
62  
63  isPrime(num) {
64    if (num < 2) return false;
65    for (let i = 2; i <= Math.sqrt(num); i++) {
66      if (num % i === 0) return false;
67    }
68    return true;
69  }
70  
71  // Przetwarzanie obrazu (filtrowanie, transformacje)
72  processImage(imageData) {
73    const { data, width, height, filterType } = imageData;
74    
75    switch (filterType) {
76      case 'grayscale':
77        this.applyGrayscaleFilter(data);
78        break;
79      case 'blur':
80        this.applyBlurFilter(data, width, height);
81        break;
82      case 'edge':
83        this.applyEdgeDetection(data, width, height);
84        break;
85    }
86    
87    this.sendResult('IMAGE_PROCESSED', {
88      processedData: data,
89      filterApplied: filterType
90    });
91  }
92  
93  applyGrayscaleFilter(data) {
94    for (let i = 0; i < data.length; i += 4) {
95      const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
96      data[i] = gray;     // Red
97      data[i + 1] = gray; // Green
98      data[i + 2] = gray; // Blue
99      // Alpha (i + 3) remains unchanged
100    }
101  }
102  
103  // Sortowanie dużych tablic
104  sortArray(array) {
105    const startTime = performance.now();
106    
107    // Implementacja merge sort dla lepszej wydajności
108    const sortedArray = this.mergeSort(array);
109    
110    const endTime = performance.now();
111    
112    this.sendResult('SORT_COMPLETE', {
113      sortedArray: sortedArray,
114      originalLength: array.length,
115      executionTime: endTime - startTime
116    });
117  }
118  
119  mergeSort(arr) {
120    if (arr.length <= 1) return arr;
121    
122    const mid = Math.floor(arr.length / 2);
123    const left = this.mergeSort(arr.slice(0, mid));
124    const right = this.mergeSort(arr.slice(mid));
125    
126    return this.merge(left, right);
127  }
128  
129  merge(left, right) {
130    const result = [];
131    let leftIndex = 0;
132    let rightIndex = 0;
133    
134    while (leftIndex < left.length && rightIndex < right.length) {
135      if (left[leftIndex] <= right[rightIndex]) {
136        result.push(left[leftIndex]);
137        leftIndex++;
138      } else {
139        result.push(right[rightIndex]);
140        rightIndex++;
141      }
142    }
143    
144    return result.concat(left.slice(leftIndex), right.slice(rightIndex));
145  }
146  
147  // Obliczanie Pi metodą Monte Carlo
148  calculatePiMonteCarlo(iterations) {
149    let pointsInCircle = 0;
150    const updateInterval = Math.floor(iterations / 100);
151    
152    for (let i = 0; i < iterations; i++) {
153      const x = Math.random() * 2 - 1; // -1 do 1
154      const y = Math.random() * 2 - 1; // -1 do 1
155      
156      if (x * x + y * y <= 1) {
157        pointsInCircle++;
158      }
159      
160      if (i % updateInterval === 0) {
161        const currentPi = (pointsInCircle / i) * 4;
162        const progress = (i / iterations) * 100;
163        
164        this.sendProgress(progress, { currentPi, iteration: i });
165      }
166    }
167    
168    const finalPi = (pointsInCircle / iterations) * 4;
169    
170    this.sendResult('PI_CALCULATION_COMPLETE', {
171      pi: finalPi,
172      iterations: iterations,
173      accuracy: Math.abs(Math.PI - finalPi)
174    });
175  }
176  
177  // Metody pomocnicze do komunikacji
178  sendResult(type, result) {
179    self.postMessage({
180      type: type,
181      result: result,
182      timestamp: Date.now()
183    });
184  }
185  
186  sendProgress(progress, additionalData = {}) {
187    self.postMessage({
188      type: 'PROGRESS_UPDATE',
189      progress: progress,
190      ...additionalData,
191      timestamp: Date.now()
192    });
193  }
194  
195  sendError(errorMessage) {
196    self.postMessage({
197      type: 'ERROR',
198      error: errorMessage,
199      timestamp: Date.now()
200    });
201  }
202}
203
204// Inicjalizacja worker
205new WorkerCalculations();

Zaawansowane wzorce Web Workers

1. Worker Pool dla równoległych obliczeń

1// WorkerPool.js - Zarządzanie wieloma worker'ami
2class WorkerPool {
3  constructor(workerScript, poolSize = navigator.hardwareConcurrency || 4) {
4    this.workerScript = workerScript;
5    this.poolSize = poolSize;
6    this.workers = [];
7    this.taskQueue = [];
8    this.activeTasksCount = 0;
9    
10    this.initializePool();
11  }
12  
13  initializePool() {
14    for (let i = 0; i < this.poolSize; i++) {
15      const worker = {
16        instance: new Worker(this.workerScript),
17        busy: false,
18        id: i
19      };
20      
21      worker.instance.onmessage = (event) => {
22        this.handleWorkerMessage(worker, event.data);
23      };
24      
25      worker.instance.onerror = (error) => {
26        this.handleWorkerError(worker, error);
27      };
28      
29      this.workers.push(worker);
30    }
31    
32    console.log(`Worker pool initialized with ${this.poolSize} workers`);
33  }
34  
35  // Wykonanie zadania z wykorzystaniem pool
36  execute(taskData) {
37    return new Promise((resolve, reject) => {
38      const task = {
39        data: taskData,
40        resolve: resolve,
41        reject: reject,
42        id: this.generateTaskId()
43      };
44      
45      const availableWorker = this.getAvailableWorker();
46      
47      if (availableWorker) {
48        this.assignTaskToWorker(availableWorker, task);
49      } else {
50        this.taskQueue.push(task);
51      }
52    });
53  }
54  
55  getAvailableWorker() {
56    return this.workers.find(worker => !worker.busy);
57  }
58  
59  assignTaskToWorker(worker, task) {
60    worker.busy = true;
61    worker.currentTask = task;
62    this.activeTasksCount++;
63    
64    worker.instance.postMessage({
65      taskId: task.id,
66      ...task.data
67    });
68  }
69  
70  handleWorkerMessage(worker, message) {
71    const task = worker.currentTask;
72    
73    if (message.type === 'TASK_COMPLETE') {
74      task.resolve(message.result);
75      this.releaseWorker(worker);
76    } else if (message.type === 'TASK_ERROR') {
77      task.reject(new Error(message.error));
78      this.releaseWorker(worker);
79    } else if (message.type === 'PROGRESS_UPDATE') {
80      // Przekazanie aktualizacji postępu (opcjonalne)
81      if (task.onProgress) {
82        task.onProgress(message.progress);
83      }
84    }
85  }
86  
87  releaseWorker(worker) {
88    worker.busy = false;
89    worker.currentTask = null;
90    this.activeTasksCount--;
91    
92    // Sprawdzenie czy są zadania w kolejce
93    if (this.taskQueue.length > 0) {
94      const nextTask = this.taskQueue.shift();
95      this.assignTaskToWorker(worker, nextTask);
96    }
97  }
98  
99  handleWorkerError(worker, error) {
100    console.error(`Worker ${worker.id} error:`, error);
101    
102    if (worker.currentTask) {
103      worker.currentTask.reject(error);
104      this.releaseWorker(worker);
105    }
106  }
107  
108  // Równoległe przetwarzanie dużych zbiorów danych
109  async processInParallel(dataArray, chunkProcessor) {
110    const chunkSize = Math.ceil(dataArray.length / this.poolSize);
111    const chunks = [];
112    
113    // Podział danych na chunks
114    for (let i = 0; i < dataArray.length; i += chunkSize) {
115      chunks.push(dataArray.slice(i, i + chunkSize));
116    }
117    
118    // Równoległe przetwarzanie chunks
119    const promises = chunks.map(chunk => 
120      this.execute({
121        type: 'PROCESS_CHUNK',
122        chunk: chunk,
123        processor: chunkProcessor.toString()
124      })
125    );
126    
127    const results = await Promise.all(promises);
128    
129    // Połączenie wyników
130    return results.flat();
131  }
132  
133  generateTaskId() {
134    return `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
135  }
136  
137  // Zamknięcie wszystkich worker'ów
138  terminate() {
139    this.workers.forEach(worker => {
140      worker.instance.terminate();
141    });
142    
143    this.workers = [];
144    this.taskQueue = [];
145    console.log('Worker pool terminated');
146  }
147  
148  // Statystyki pool
149  getStats() {
150    return {
151      poolSize: this.poolSize,
152      activeWorkers: this.workers.filter(w => w.busy).length,
153      queueLength: this.taskQueue.length,
154      activeTasks: this.activeTasksCount
155    };
156  }
157}
158
159// Użycie Worker Pool
160const workerPool = new WorkerPool('calculation-worker.js', 8);
161
162// Przykład równoległego przetwarzania
163async function processLargeDataset() {
164  const largeArray = Array.from({ length: 1000000 }, (_, i) => Math.random() * 1000);
165  
166  try {
167    const results = await workerPool.processInParallel(largeArray, (chunk) => {
168      // Funkcja przetwarzania będzie wykonana w worker
169      return chunk.map(x => Math.sqrt(x * x + 1));
170    });
171    
172    console.log('Przetwarzanie zakończone:', results.length);
173    console.log('Stats:', workerPool.getStats());
174  } catch (error) {
175    console.error('Błąd przetwarzania:', error);
176  }
177}

2. Shared Array Buffer dla wydajnej komunikacji

1// SharedArrayBufferWorker.js - Współdzielona pamięć między worker'ami
2class SharedArrayBufferManager {
3  constructor() {
4    this.checkSupport();
5  }
6  
7  checkSupport() {
8    if (typeof SharedArrayBuffer === 'undefined') {
9      console.warn('SharedArrayBuffer nie jest wspierany');
10      this.fallbackToTransferableObjects();
11      return false;
12    }
13    return true;
14  }
15  
16  // Tworzenie współdzielonej pamięci do obliczeń macierzy
17  createSharedMatrixBuffer(rows, cols) {
18    const bufferSize = rows * cols * Float64Array.BYTES_PER_ELEMENT;
19    const sharedBuffer = new SharedArrayBuffer(bufferSize);
20    
21    return {
22      buffer: sharedBuffer,
23      matrix: new Float64Array(sharedBuffer),
24      rows: rows,
25      cols: cols,
26      
27      // Metody pomocnicze
28      get: (row, col) => {
29        return this.matrix[row * cols + col];
30      },
31      
32      set: (row, col, value) => {
33        this.matrix[row * cols + col] = value;
34      },
35      
36      fill: (value) => {
37        this.matrix.fill(value);
38      }
39    };
40  }
41  
42  // Równoległe mnożenie macierzy
43  async parallelMatrixMultiply(matrixA, matrixB, workerCount = 4) {
44    const rowsA = matrixA.rows;
45    const colsA = matrixA.cols;
46    const colsB = matrixB.cols;
47    
48    // Tworzenie współdzielonej macierzy wynikowej
49    const resultMatrix = this.createSharedMatrixBuffer(rowsA, colsB);
50    
51    // Podział pracy między worker'y
52    const rowsPerWorker = Math.ceil(rowsA / workerCount);
53    const workers = [];
54    
55    for (let i = 0; i < workerCount; i++) {
56      const startRow = i * rowsPerWorker;
57      const endRow = Math.min(startRow + rowsPerWorker, rowsA);
58      
59      if (startRow < rowsA) {
60        const worker = new Worker('matrix-worker.js');
61        
62        const promise = new Promise((resolve, reject) => {
63          worker.onmessage = (event) => {
64            if (event.data.type === 'MATRIX_COMPLETE') {
65              worker.terminate();
66              resolve(event.data.result);
67            }
68          };
69          
70          worker.onerror = reject;
71        });
72        
73        worker.postMessage({
74          type: 'MULTIPLY_MATRIX_ROWS',
75          matrixABuffer: matrixA.buffer,
76          matrixBBuffer: matrixB.buffer,
77          resultBuffer: resultMatrix.buffer,
78          dimensions: {
79            rowsA: rowsA,
80            colsA: colsA,
81            colsB: colsB
82          },
83          rowRange: { start: startRow, end: endRow }
84        });
85        
86        workers.push(promise);
87      }
88    }
89    
90    await Promise.all(workers);
91    return resultMatrix;
92  }
93  
94  fallbackToTransferableObjects() {
95    console.log('Używanie Transferable Objects jako alternatywy');
96    // Implementacja z Transferable Objects
97  }
98}
99
100// matrix-worker.js - Worker do obliczeń macierzy
101self.onmessage = function(event) {
102  const { type, matrixABuffer, matrixBBuffer, resultBuffer, dimensions, rowRange } = event.data;
103  
104  if (type === 'MULTIPLY_MATRIX_ROWS') {
105    const matrixA = new Float64Array(matrixABuffer);
106    const matrixB = new Float64Array(matrixBBuffer);
107    const result = new Float64Array(resultBuffer);
108    
109    const { rowsA, colsA, colsB } = dimensions;
110    const { start, end } = rowRange;
111    
112    // Mnożenie macierzy dla przydzielonych wierszy
113    for (let i = start; i < end; i++) {
114      for (let j = 0; j < colsB; j++) {
115        let sum = 0;
116        for (let k = 0; k < colsA; k++) {
117          sum += matrixA[i * colsA + k] * matrixB[k * colsB + j];
118        }
119        result[i * colsB + j] = sum;
120      }
121    }
122    
123    self.postMessage({
124      type: 'MATRIX_COMPLETE',
125      result: `Rows ${start}-${end} completed`
126    });
127  }
128};

3. Service Worker do Background Processing

1// ServiceWorkerManager.js - Zarządzanie długotrwałymi zadaniami w tle
2class ServiceWorkerManager {
3  constructor() {
4    this.serviceWorker = null;
5    this.messageChannel = null;
6    this.setupServiceWorker();
7  }
8  
9  async setupServiceWorker() {
10    if ('serviceWorker' in navigator) {
11      try {
12        const registration = await navigator.serviceWorker.register('background-worker.js');
13        
14        // Oczekiwanie na aktywację service worker
15        await navigator.serviceWorker.ready;
16        
17        this.serviceWorker = registration.active || registration.waiting || registration.installing;
18        this.setupMessageChannel();
19        
20        console.log('Service Worker zarejestrowany i gotowy');
21      } catch (error) {
22        console.error('Błąd rejestracji Service Worker:', error);
23      }
24    }
25  }
26  
27  setupMessageChannel() {
28    this.messageChannel = new MessageChannel();
29    
30    // Obsługa wiadomości od Service Worker
31    this.messageChannel.port1.onmessage = (event) => {
32      this.handleServiceWorkerMessage(event.data);
33    };
34    
35    // Wysłanie portu do Service Worker
36    navigator.serviceWorker.controller?.postMessage(
37      { type: 'INIT_PORT' },
38      [this.messageChannel.port2]
39    );
40  }
41  
42  // Zlecenie długotrwałego zadania do Service Worker
43  scheduleBackgroundTask(taskConfig) {
44    if (this.messageChannel) {
45      this.messageChannel.port1.postMessage({
46        type: 'SCHEDULE_TASK',
47        task: {
48          id: this.generateTaskId(),
49          ...taskConfig,
50          scheduledAt: Date.now()
51        }
52      });
53    }
54  }
55  
56  // Przykład: Okresowe synchronizowanie danych
57  scheduleDataSync(interval = 300000) { // 5 minut
58    this.scheduleBackgroundTask({
59      type: 'DATA_SYNC',
60      interval: interval,
61      endpoint: '/api/sync',
62      recurring: true
63    });
64  }
65  
66  // Przykład: Przetwarzanie plików w tle
67  scheduleFileProcessing(files) {
68    files.forEach(file => {
69      this.scheduleBackgroundTask({
70        type: 'FILE_PROCESSING',
71        fileName: file.name,
72        fileData: file,
73        processor: 'image-compression'
74      });
75    });
76  }
77  
78  handleServiceWorkerMessage(message) {
79    switch (message.type) {
80      case 'TASK_COMPLETED':
81        this.onTaskCompleted(message.task, message.result);
82        break;
83      case 'TASK_FAILED':
84        this.onTaskFailed(message.task, message.error);
85        break;
86      case 'SYNC_COMPLETED':
87        this.onSyncCompleted(message.result);
88        break;
89    }
90  }
91  
92  onTaskCompleted(task, result) {
93    console.log(`Zadanie ${task.id} zakończone:`, result);
94    
95    // Aktualizacja UI lub stanu aplikacji
96    this.updateApplicationState(task, result);
97  }
98  
99  generateTaskId() {
100    return `bg_task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
101  }
102}
103
104// background-worker.js - Service Worker
105class BackgroundTaskProcessor {
106  constructor() {
107    this.activeTasks = new Map();
108    this.messagePort = null;
109    this.setupEventListeners();
110  }
111  
112  setupEventListeners() {
113    self.addEventListener('message', (event) => {
114      if (event.data.type === 'INIT_PORT') {
115        this.messagePort = event.ports[0];
116        this.setupPortListener();
117      }
118    });
119    
120    // Background Sync
121    self.addEventListener('sync', (event) => {
122      if (event.tag === 'background-data-sync') {
123        event.waitUntil(this.performDataSync());
124      }
125    });
126  }
127  
128  setupPortListener() {
129    this.messagePort.onmessage = (event) => {
130      this.handleTask(event.data);
131    };
132  }
133  
134  async handleTask(message) {
135    if (message.type === 'SCHEDULE_TASK') {
136      const task = message.task;
137      
138      try {
139        const result = await this.executeTask(task);
140        
141        this.messagePort.postMessage({
142          type: 'TASK_COMPLETED',
143          task: task,
144          result: result
145        });
146      } catch (error) {
147        this.messagePort.postMessage({
148          type: 'TASK_FAILED',
149          task: task,
150          error: error.message
151        });
152      }
153    }
154  }
155  
156  async executeTask(task) {
157    switch (task.type) {
158      case 'DATA_SYNC':
159        return await this.performDataSync(task);
160      case 'FILE_PROCESSING':
161        return await this.processFile(task);
162      case 'BATCH_CALCULATION':
163        return await this.performBatchCalculation(task);
164      default:
165        throw new Error(`Unknown task type: ${task.type}`);
166    }
167  }
168  
169  async performDataSync(task) {
170    try {
171      const response = await fetch(task.endpoint, {
172        method: 'POST',
173        headers: { 'Content-Type': 'application/json' },
174        body: JSON.stringify({ timestamp: Date.now() })
175      });
176      
177      if (!response.ok) {
178        throw new Error(`Sync failed: ${response.status}`);
179      }
180      
181      const data = await response.json();
182      
183      // Zapisanie w IndexedDB lub Cache API
184      await this.storeDataLocally(data);
185      
186      return { success: true, syncedRecords: data.length };
187    } catch (error) {
188      throw new Error(`Data sync failed: ${error.message}`);
189    }
190  }
191  
192  async processFile(task) {
193    // Symulacja przetwarzania pliku
194    const { fileName, processor } = task;
195    
196    switch (processor) {
197      case 'image-compression':
198        return await this.compressImage(task.fileData);
199      case 'video-transcoding':
200        return await this.transcodeVideo(task.fileData);
201      default:
202        throw new Error(`Unknown processor: ${processor}`);
203    }
204  }
205  
206  async storeDataLocally(data) {
207    // Implementacja zapisu w IndexedDB
208    return new Promise((resolve, reject) => {
209      const request = indexedDB.open('AppDatabase', 1);
210      
211      request.onsuccess = (event) => {
212        const db = event.target.result;
213        const transaction = db.transaction(['syncedData'], 'readwrite');
214        const store = transaction.objectStore('syncedData');
215        
216        store.put({ id: 'latest', data: data, timestamp: Date.now() });
217        
218        transaction.oncomplete = () => resolve();
219        transaction.onerror = () => reject(transaction.error);
220      };
221      
222      request.onerror = () => reject(request.error);
223    });
224  }
225}
226
227new BackgroundTaskProcessor();

Performance monitoring i debugging

1. Worker Performance Metrics

1// WorkerPerformanceMonitor.js
2class WorkerPerformanceMonitor {
3  constructor() {
4    this.metrics = {
5      taskExecutionTimes: [],
6      memoryUsage: [],
7      errorRates: {},
8      throughput: []
9    };
10    
11    this.startTime = performance.now();
12  }
13  
14  // Monitorowanie wydajności worker'a
15  monitorWorkerPerformance(worker, taskId) {
16    const startTime = performance.now();
17    let memoryBefore = null;
18    
19    // Pomiar pamięci (jeśli dostępny)
20    if (performance.memory) {
21      memoryBefore = performance.memory.usedJSHeapSize;
22    }
23    
24    const originalPostMessage = worker.postMessage.bind(worker);
25    const originalOnMessage = worker.onmessage;
26    
27    // Intercept postMessage
28    worker.postMessage = (message) => {
29      console.log(`[Worker] Sending task ${taskId}:`, message);
30      originalPostMessage(message);
31    };
32    
33    // Intercept onmessage
34    worker.onmessage = (event) => {
35      const endTime = performance.now();
36      const executionTime = endTime - startTime;
37      
38      // Zapisanie metryki czasu wykonania
39      this.metrics.taskExecutionTimes.push({
40        taskId: taskId,
41        executionTime: executionTime,
42        timestamp: Date.now()
43      });
44      
45      // Pomiar pamięci po wykonaniu
46      if (performance.memory && memoryBefore) {
47        const memoryAfter = performance.memory.usedJSHeapSize;
48        const memoryDelta = memoryAfter - memoryBefore;
49        
50        this.metrics.memoryUsage.push({
51          taskId: taskId,
52          memoryDelta: memoryDelta,
53          timestamp: Date.now()
54        });
55      }
56      
57      console.log(`[Worker] Task ${taskId} completed in ${executionTime.toFixed(2)}ms`);
58      
59      if (originalOnMessage) {
60        originalOnMessage(event);
61      }
62    };
63    
64    return worker;
65  }
66  
67  // Analiza wydajności
68  generatePerformanceReport() {
69    const report = {
70      totalRuntime: performance.now() - this.startTime,
71      taskCount: this.metrics.taskExecutionTimes.length,
72      averageExecutionTime: this.calculateAverageExecutionTime(),
73      memoryTrends: this.analyzeMemoryTrends(),
74      throughputAnalysis: this.calculateThroughput(),
75      recommendations: this.generateRecommendations()
76    };
77    
78    return report;
79  }
80  
81  calculateAverageExecutionTime() {
82    if (this.metrics.taskExecutionTimes.length === 0) return 0;
83    
84    const total = this.metrics.taskExecutionTimes.reduce(
85      (sum, metric) => sum + metric.executionTime, 0
86    );
87    
88    return total / this.metrics.taskExecutionTimes.length;
89  }
90  
91  analyzeMemoryTrends() {
92    if (this.metrics.memoryUsage.length === 0) return null;
93    
94    const memoryDeltas = this.metrics.memoryUsage.map(m => m.memoryDelta);
95    const averageMemoryDelta = memoryDeltas.reduce((a, b) => a + b, 0) / memoryDeltas.length;
96    
97    return {
98      averageMemoryDelta: averageMemoryDelta,
99      maxMemoryDelta: Math.max(...memoryDeltas),
100      minMemoryDelta: Math.min(...memoryDeltas),
101      potentialMemoryLeak: averageMemoryDelta > 1024 * 1024 // > 1MB average
102    };
103  }
104  
105  calculateThroughput() {
106    const timeWindow = 60000; // 1 minuta
107    const now = Date.now();
108    const recentTasks = this.metrics.taskExecutionTimes.filter(
109      task => now - task.timestamp < timeWindow
110    );
111    
112    return {
113      tasksPerMinute: recentTasks.length,
114      averageTaskTime: recentTasks.length > 0 
115        ? recentTasks.reduce((sum, task) => sum + task.executionTime, 0) / recentTasks.length
116        : 0
117    };
118  }
119  
120  generateRecommendations() {
121    const recommendations = [];
122    const avgTime = this.calculateAverageExecutionTime();
123    const memoryTrends = this.analyzeMemoryTrends();
124    
125    if (avgTime > 5000) { // > 5 sekund
126      recommendations.push('Rozważ podział długotrwałych zadań na mniejsze części');
127    }
128    
129    if (memoryTrends?.potentialMemoryLeak) {
130      recommendations.push('Wykryto potencjalny memory leak - sprawdź zarządzanie pamięcią');
131    }
132    
133    if (this.metrics.taskExecutionTimes.length > 1000) {
134      recommendations.push('Duża liczba zadań - rozważ implementację Worker Pool');
135    }
136    
137    return recommendations;
138  }
139}
140
141// Użycie monitoring
142const performanceMonitor = new WorkerPerformanceMonitor();
143
144// Monitorowanie konkretnego worker'a
145const worker = new Worker('calculation-worker.js');
146const monitoredWorker = performanceMonitor.monitorWorkerPerformance(worker, 'task_001');
147
148// Generowanie raportu po pewnym czasie
149setTimeout(() => {
150  const report = performanceMonitor.generatePerformanceReport();
151  console.log('Performance Report:', report);
152}, 30000);