Что такое веб-воркер? Почему и как это использовать?

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

Хорошо. Итак, вы создаете веб-сайт и запускаете все задачи в основном потоке выполнения. У вас есть задача с интенсивным использованием процессора или трудоемкие задачи, выполнение которых может занять больше времени, тогда что произойдет? 🤔 Страница перестает отвечать на запросы. Вы не можете взаимодействовать со страницей.

Итак, какое решение? Именно здесь на сцену выходят Web Workers.
Web Workers — это средства выполнения трудоемких сценариев/задач в фоновых потоках, отдельных от основного потока выполнения. Рабочий может выполнять ввод-вывод с помощью fetch или XMLHttpRequest.

Почему мы должны использовать веб-воркеров?

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

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

Как использовать веб-воркеров?

Воркеры и создатель воркеров общаются между собой, используя метод postMessage и прослушиватель событий onmessage. Здесь происходит вся магия.

  1. Проверьте, поддерживает ли браузер Workers!
  2. Вы создаете веб-воркер.
  3. Отправьте сообщение Worker с помощью метода postMessage. (пример: 2 числа, начало и конец)
  4. Рабочий прослушивает сообщение от создателя через прослушиватель событий onmessage. (Рабочий начинает свою работу. Пример: поиск простых чисел между началом и концом).
    Поскольку это происходит в рабочем потоке, это не влияет на основной поток.
  5. Рабочий выполняет задачи в фоновом режиме и отправляет сообщение через postMessage родителю.

Пример:

// Main.js file
// Check for worker
if(window.Worker) { 
    // create a worker object with path for worker script as param
    let myWorker = new Worker('worker.js');
    
    myWorker.postMessage([0, 100000000]); 
    
    // listen from worker
    myWorker.onmessage = (e) => console.log(e.data) 
    
    // Terminate a worker
    myWorker.terminate()
}
// worker.js 
// listen from creator thread
onmessage = function(e) {
    console.log('Message received from main script');
    
    // time consuming logic to get all prime numbers 
    // let primeNumbers = ["all prime numbers here"]
    console.log('Posting message back to main script');
    postMessage(primeNumbers);
}

Примечание:

  1. Один поток может создать n рабочих потоков.
  2. Рабочий также может порождать рабочих, а также так называемых вспомогательных рабочих.
  3. Мы также можем создавать Shared Workers с помощью конструктора SharedWorker. Подробнее об этом в следующей статье. Оставайтесь на связи для этого. Привет🤘