Как улучшить свой JavaScript с помощью Web Workers

Feb 15 2023
Руководство для начинающих
Что такое веб-воркеры Веб-воркеры — это функция JavaScript, которая позволяет нам выполнять скрипты в фоновом режиме, не блокируя основной поток. Это полезно, когда нам нужно выполнять длительные задачи, которые потенциально могут привести к зависанию пользовательского интерфейса, например сложные вычисления или обработка данных.
Изображение Web Worker, созданное с помощью: https://www.fotor.com/features/ai-image-generator/

Что такое веб-воркеры

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

Веб-воркеры — это отдельные файлы JavaScript, которые запускаются в своих собственных потоках. Они создаются с помощью Workerконструктора и взаимодействуют с основным потоком с помощью методов postMessage()и onmessage. В этом сообщении блога мы рассмотрим, как использовать веб-воркеры в JavaScript, с примерами и простым для понимания контекстом для читателей старше 18 лет.

Создание веб-воркера

Чтобы создать веб-воркер, нам нужно создать новый файл JavaScript, который будет работать в фоновом режиме. Например, давайте создадим файл с именем worker.js, который вычисляет факториал заданного числа:

// worker.js

function calculateFactorial(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

onmessage = function(event) {
  const n = event.data;
  const result = calculateFactorial(n);
  postMessage(result);
};

Чтобы использовать этот воркер в нашем основном скрипте, нам нужно создать новый экземпляр конструктора Workerи передать ему путь к нашему файлу воркера:

// index.js

const factorialWorker = new Worker('worker.js');

factorialWorker.postMessage(10);

factorialWorker.onmessage = function(event) {
  const result = event.data;
  console.log(`The factorial of 10 is ${result}`);
};

Примечание. Для запуска рабочих процессов требуется размещенная служба, и ее нельзя запустить на html-странице, запустив только «[fileName].html». Чтобы заставить рабочих работать, необходимо добавить операторы импорта, а метод необходимо изменить.

const customWorker = new Worker(
    new URL('./worker.js', import.meta.url),
    { type: 'module' }
);


Запуск приведенного выше скрипта выведет результат на консоль: «Факториал 10 равен 3628800».

Ограничения веб-воркеров

Хотя веб-воркеры полезны для выгрузки тяжелых вычислительных задач из основного потока, у них есть некоторые ограничения. Например, веб-воркеры не могут получить доступ к модели DOM или любым другим API, доступным для основного потока. Они также не могут совместно использовать память с основным потоком, а это означает, что нам нужно использовать передачу сообщений для связи между двумя потоками.

Кроме того, веб-воркеры не поддерживаются в некоторых старых браузерах . Прежде чем использовать веб-воркеры в своем приложении, важно проверить, поддерживаются ли они во всех браузерах, на которые вы ориентируетесь.

Заключение

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

Я надеюсь, что это введение в веб-работников было полезным и информативным для читателей во всем мире.