Веб-воркеры в JavaScript

Articles

Эта статья объясняет, что такое веб-воркеры в JavaScript.

YouTube Video

javascript-web-worker.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-web-worker.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-web-worker.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-web-worker.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

`Web Worker` в JavaScript

Web Worker в JavaScript — это механизм, который позволяет запускать код в отдельном потоке, отличном от главного потока. Это позволяет выполнять тяжелые вычисления и длительные операции асинхронно, не блокируя основной поток. Используя Web Worker, можно улучшить отзывчивость пользовательского интерфейса и повысить производительность приложения.

Основное использование `Web Worker`

Давайте рассмотрим базовое использование Web Worker.

Новый Web Worker создается путем указания файла JavaScript.

1// worker.js (created as a separate file)
2onmessage = function(event) {
3    // Receive a message
4    const data = event.data;
5    // Perform heavy computation or processing
6    const result = data * 2;
7    // Return the result to the main thread
8    postMessage(result);
9};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

Этот код демонстрирует базовый механизм использования Web Worker, чтобы запрашивать вычисления из главного потока и получать результат асинхронно. 10 отправляется как сообщение в Web Worker, и возвращается результат в виде сообщения 20. Главный поток и Web Worker обмениваются сообщениями для запроса и получения результатов обработки.

Базовые функции

Web Worker предоставляет следующие основные возможности.

postMessage и onmessage Используется для отправки и получения сообщений между главным потоком и Web Worker. Отправляйте данные с помощью postMessage и получайте их с помощью onmessage.
Независимость потоков Web Worker работает полностью независимо от главного потока. Следовательно, переменные и функции, объявленные в основном потоке, недоступны. Необходимые данные должны передаваться через postMessage.
Импорт скриптов Для загрузки внешних скриптов внутри Web Worker используйте importScripts().

1// mathUtils.js
2function double(n) {
3    return n * 2;
4}

1// worker.js
2importScripts('mathUtils.js');
3
4onmessage = function(event) {
5    const input = event.data;
6    const result = double(input); // mathUtils.jsの関数を使用
7    postMessage(result);
8};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

В качестве альтернативы можно использовать import, как показано ниже.

1// lib.js
2
3// Simulated CPU-intensive task
4export function doHeavyWork(n) {
5    return n * 2;
6}

1// worker.js
2import { doHeavyWork } from './lib.js';
3
4self.onmessage = (event) => {
5  const data = event.data;
6  const result = doHeavyWork(data);
7  self.postMessage(result);
8};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js', { type: 'module' });
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

Указав type: 'module' в аргументе конструктора new Worker, вы можете рассматривать воркер как ES-модуль и использовать синтаксис import.

Различия между `Web Worker` и `async` функциями

`Web Worker`

Особенности

Изоляция потоков Web Worker выполняет JavaScript-код в отдельном потоке. Это позволяет выполнять тяжелые вычисления, не блокируя главный поток (UI поток).
Параллельная обработка Использование Web Worker позволяет JavaScript-программам выполнять параллельную обработку в нескольких потоках.
Обмен сообщениями Web Worker и главный поток не обмениваются данными напрямую, а используют сообщения через postMessage и onmessage.
Нет доступа к пользовательскому интерфейсу (UI) Web Worker не имеет доступа к DOM, поэтому не может напрямую изменять пользовательский интерфейс.

Случаи использования

Он подходит для процессов тяжелых вычислений, таких как обработка изображений, анализ данных и шифрование.
Его можно использовать, когда не нужно блокировать главный поток.

`async`

Особенности

Упрощение асинхронной обработки Функция async — это синтаксис, делающий асинхронную обработку более читаемой, внутренне использующий Promise.
Один поток Все функции async выполняются в главном потоке. Поэтому необходимо придумывать способы избежать блокировки UI потока.
Оптимально для операций ввода-вывода (I/O) Он подходит для асинхронных задач, таких как сетевые запросы и чтение файлов, но не для тяжелых вычислений.

Случаи использования

Он подходит для сетевых коммуникаций, например, вызовов API.
Он подходит для чтения и записи файлов с использованием браузерных API или Node.js.

Ключевые различия

Особенности	Web Worker	async
Среда выполнения	Отдельный поток	Главный поток
Цель	Параллельная обработка, разгрузка тяжёлых вычислений	Краткое описание асинхронных операций
Доступ к DOM	Невозможен	Возможен
Метод общения	Передача сообщений (например, `postMessage`)	Не требуется (обрабатывается через прямые вызовы функций или `await`)
Примеры использования	Времязатратные вычисления, анализ данных	Операции ввода-вывода, вызовы API

Когда использовать каждый

Для задач, требующих больших вычислительных ресурсов, можно использовать Web Worker, чтобы снизить нагрузку на главный поток. С другой стороны, для сетевого взаимодействия или операций ввода-вывода можно упростить код, используя async/await.

Грамотно комбинируя оба подхода, можно достичь эффективной асинхронной обработки.

Примеры использования `Web Worker`

Пример переноса вычислений на воркер

Далее приведён пример разгрузки тяжелых вычислений.

 1// worker.js
 2onmessage = function(event) {
 3    const num = event.data;
 4    const result = fibonacci(num);
 5    postMessage(result);
 6};
 7
 8function fibonacci(n) {
 9    if (n <= 1) return n;
10    return fibonacci(n - 1) + fibonacci(n - 2);
11}

1// Main thread
2const worker = new Worker('worker.js');
3
4worker.onmessage = function(event) {
5    console.log('Fibonacci result: ', event.data);
6};
7
8worker.postMessage(40); // Delegate heavy computation to the worker

Этот код демонстрирует использование Web Worker для разделения и выполнения тяжёлых задач, таких как вычисление последовательности Фибоначчи, отдельно от основного потока.

Пример указания имени задачи

Далее приведён пример отправки и получения сообщений с указанием имени задачи.

 1// worker.js
 2self.onmessage = function(event) {
 3    switch (event.data.task) {
 4        case 'add':
 5            const result = event.data.a + event.data.b;
 6            self.postMessage({ task: 'result', value: result });
 7            break;
 8        default:
 9            self.postMessage({ task: 'error', message: 'Invalid Task' });
10    }
11};

 1// Main thread
 2const worker = new Worker('worker.js');
 3
 4worker.onmessage = function(event) {
 5    switch (event.data.task) {
 6        case 'result':
 7            console.log('Task result: ', event.data.value);
 8            break;
 9        case 'error':
10            console.error('Error: ', event.data.message);
11            break;
12    }
13};
14
15worker.postMessage({ task: 'add', a: 10, b: 20 });

Этот код показывает пример распределения обработки по имени задачи (task) в сообщении, при котором Web Worker возвращает результаты вычислений или ошибки в основной поток вместе с именем задачи.

Примечания

Используя Web Worker, учитывайте следующие моменты.

Нет доступа к DOM Web Worker не может изменять пользовательский интерфейс и не имеет доступа к DOM. Манипуляции с DOM должны выполняться в основном потоке.
Затраты на коммуникацию Обмен данными между главным потоком и Web Worker сопряжен с некоторыми накладными расходами. Это может повлиять на производительность, особенно при частом обмене большими объемами данных.
Политика одного источника (same-origin) Скрипты Web Worker подчиняются политике одного источника (same-origin policy). Скрипты нельзя загружать с других доменов.

Использование Web Worker может улучшить производительность и отзывчивость вашего приложения, но важно использовать его с учётом ограничений, таких как невозможность манипулировать DOM.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Fetch/Метод XMLHttpRequest в JavaScript

Веб-воркеры в JavaScript

YouTube Video

Web Worker в JavaScript

Основное использование Web Worker

Базовые функции

Различия между Web Worker и async функциями

Web Worker

Особенности

Случаи использования

async

Особенности

Случаи использования

Ключевые различия

Когда использовать каждый

Примеры использования Web Worker

Пример переноса вычислений на воркер

Пример указания имени задачи

Примечания

YouTube Video

`Web Worker` в JavaScript

Основное использование `Web Worker`

Различия между `Web Worker` и `async` функциями

`Web Worker`

`async`

Примеры использования `Web Worker`