Когда main thread занят вычислениями (парсинг CSV, обработка изображений, криптография), UI замирает. Web Worker решает это. **Worker-файл:** ```javascript // workers/dataProcessor.worker.js // Этот файл выполняется в отдельном потоке self.addEventListener('message', (event) => { const { type, payload } = event.data switch (type) { case 'PARSE_CSV': { const result = parseCSV(payload.text, payload.delimiter) self.postMessage({ type: 'PARSE_CSV_RESULT', payload: result }) break } case 'SORT_LARGE_DATASET': { const sorted = payload.data.toSorted((a, b) => { const aVal = a[payload.sortKey] const bVal = b[payload.sortKey] return payload.order === 'asc' ? String(aVal).localeCompare(String(bVal)) : String(bVal).localeCompare(String(aVal)) }) self.postMessage({ type: 'SORT_RESULT', payload: sorted }) break } case 'FILTER_COMPLEX': { const filtered = payload.data.filter((item) => { return payload.conditions.every((cond) => { const value = item[cond.field] switch (cond.operator) { case 'contains': return String(value).toLowerCase().includes(cond.value.toLowerCase()) case 'gt': return Number(value) > Number(cond.value) case 'lt': return Number(value) < Number(cond.value) case 'eq': return value === cond.value default: return true } }) }) self.postMessage({ type: 'FILTER_RESULT', payload: filtered }) break } } }) function parseCSV(text, delimiter = ',') { const lines = text.split('\n') const headers = lines[0].split(delimiter).map((h) => h.trim()) const rows = [] for (let i = 1; i < lines.length; i++) { if (!lines[i].trim()) continue const values = lines[i].split(delimiter) const row = {} headers.forEach((header, j) => { row[header] = values[j]?.trim() ?? '' }) rows.push(row) } return { headers, rows, totalRows: rows.length } } ``` **Универсальный composable для workers:** ```javascript // composables/useWorker.js import { ref, shallowRef, onUnmounted } from 'vue' export function useWorker(workerFactory) { const worker = shallowRef(null) const result = ref(null) const error = ref(null) const isProcessing = ref(false) // Очередь промисов для request-response паттерна const pendingRequests = new Map() let requestId = 0 function init() { if (worker.value) return worker.value = workerFactory() worker.value.addEventListener('message', (event) => { const { type, payload, id } = event.data // Если есть id — это ответ на конкретный запрос if (id !== undefined && pendingRequests.has(id)) { const { resolve } = pendingRequests.get(id) pendingRequests.delete(id) resolve(payload) if (pendingRequests.size === 0) isProcessing.value = false return } // Общий результат result.value = { type, payload } isProcessing.value = false }) worker.value.addEventListener('error', (event) => { error.value = event.message isProcessing.value = false // Reject все pending запросы for (const { reject } of pendingRequests.values()) { reject(new Error(event.message)) } pendingRequests.clear() }) } function post(message) { init() isProcessing.value = true error.value = null worker.value.postMessage(message) } // Promise-based API function request(message) { init() isProcessing.value = true error.value = null const id = ++requestId return new Promise((resolve, reject) => { pendingRequests.set(id, { resolve, reject }) worker.value.postMessage({ ...message, id }) }) } function terminate() { worker.value?.terminate() worker.value = null for (const { reject } of pendingRequests.values()) { reject(new Error('Worker terminated')) } pendingRequests.clear() } onUnmounted(terminate) return { result, error, isProcessing, post, request, terminate } } ``` **Composable для конкретной задачи:** ```javascript // composables/useDataProcessor.js import { useWorker } from './useWorker' export function useDataProcessor() { const { result, error, isProcessing, post, request } = useWorker( () => new Worker(new URL('../workers/dataProcessor.worker.js', import.meta.url), { type: 'module', }) ) async function parseCSV(text, delimiter = ',') { post({ type: 'PARSE_CSV', payload: { text, delimiter } }) } async function sortDataset(data, sortKey, order = 'asc') { post({ type: 'SORT_LARGE_DATASET', payload: { data, sortKey, order } }) } async function filterComplex(data, conditions) { post({ type: 'FILTER_COMPLEX', payload: { data, conditions } }) } return { result, error, isProcessing, parseCSV, sortDataset, filterComplex, } } ``` **Использование:** ```vue ``` **Transferable objects для больших данных:** ```javascript // Передача ArrayBuffer без копирования — мгновенно, даже для гигабайтов const buffer = new ArrayBuffer(1024 * 1024 * 100) // 100 MB worker.postMessage({ type: 'PROCESS', buffer }, [buffer]) // После transfer buffer.byteLength === 0 в основном потоке ``` ## 📌 Реальные кейсы 🔹 **CSV/Excel импорт** -- парсинг файла на 500 000 строк. В main thread это заблокировало бы UI на 3-5 секунд. В Worker -- UI остаётся отзывчивым. 🔹 **Image processing** -- наложение фильтров (blur, grayscale) на изображение попиксельно. OffscreenCanvas + Worker = рендер без блокировки. 🔹 **Поиск по большому датасету** -- fuzzy search по 100 000 записей с алгоритмом Левенштейна. Main thread отправляет запрос, Worker возвращает результаты. --- ## Частые ошибки ```javascript // ❌ Передавать огромный объект через postMessage (копируется!) worker.postMessage({ data: millionRowsArray }) // structured clone может быть медленнее, чем сама обработка // ✅ Transferable objects или SharedArrayBuffer const buffer = encodeToArrayBuffer(data) worker.postMessage({ buffer }, [buffer]) // Transfer, не копия ``` ```javascript // ❌ Не терминировать worker при размонтировании // Worker продолжает работать в фоне, потребляя CPU // ✅ terminate() в onUnmounted onUnmounted(() => worker.terminate()) ``` ```javascript // ❌ Пытаться обратиться к DOM из worker // Workers не имеют доступа к document, window, DOM // ✅ Worker только для вычислений, результат возвращается в main thread ``` --- ## Резюме | Когда использовать | Когда НЕ нужен | |---|---| | Парсинг больших файлов | Простые fetch-запросы | | Тяжёлые вычисления (crypto, ML) | Работа с DOM | | Обработка изображений | Мелкие операции < 50мс | | Поиск по большим данным | Всё, что и так быстро | --- ---

Как работать с Web Workers в Vue?