Какво са уеб работници и за какво са нужни?

Уеб работници са начин за стартиране на JavaScript код във фонов поток, отделен от основния поток на потребителския интерфейс на браузъра.

Цел:

Изпълнение на ресурсоемки изчисления без блокиране на основния поток, което предотвратява замръзване на интерфейса.
Обработка на големи данни или изпълнение на дълги операции (например парсване, компресия, мрежови заявки в някои случаи) на заден план.
Подобряване на производителността и отзивчивостта на уеб приложенията.

Типове уеб работници:

Dedicated Worker: Свързан със скрипта, който го е създал.
Shared Worker: Може да бъде споделен между няколко скрипта, изпълняващи се в различни прозорци или раздели на един и същи домейн.
Service Worker: Засича мрежови заявки, управлява кеша, осигурява офлайн достъп, поддържа push известия.

Пример за създаване и използване на Dedicated Worker:

// main.js (основен поток)
const worker = new Worker('worker.js');

// Изпращане на съобщение към работника
worker.postMessage('Започни тежки изчисления');

// Получаване на съобщения от работника
worker.onmessage = function(event) {
  console.log('Получено от работника:', event.data);
};

// worker.js (код на работника)
self.onmessage = function(event) {
  console.log('Получено в работника:', event.data);

  // Имитиране на тежки изчисления
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Изпращане на съобщение обратно към основния поток
  self.postMessage('Изчисленията са завършени, резултат: ' + result);
};

Ограничения:

Няма директен достъп до DOM.
Не може да се използват някои глобални променливи на основния поток (например, window, document).
Общуването става чрез асинхронен обмен на съобщения (postMessage и onmessage/addEventListener('message')).
Данните между потоковете се прехвърлят чрез копиране (structured clone алгоритъм), но за големи данни може да се използват Transferable Objects за прехвърляне по референция (с загуба на достъп в оригиналния поток).