Что такое веб-воркер? Почему и как это использовать?
Что такое веб-воркер?
Хорошо. Итак, вы создаете веб-сайт и запускаете все задачи в основном потоке выполнения. У вас есть задача с интенсивным использованием процессора или трудоемкие задачи, выполнение которых может занять больше времени, тогда что произойдет? 🤔 Страница перестает отвечать на запросы. Вы не можете взаимодействовать со страницей.
Итак, какое решение? Именно здесь на сцену выходят Web Workers.
Web Workers — это средства выполнения трудоемких сценариев/задач в фоновых потоках, отдельных от основного потока выполнения. Рабочий может выполнять ввод-вывод с помощью fetch или XMLHttpRequest.
Почему мы должны использовать веб-воркеров?
Вы, должно быть, уловили идею из последнего абзаца. Веб-воркеры позволяют создавать фоновые потоки отдельно от основного потока выполнения, в котором обычно выполняется логика пользовательского интерфейса.
Ключевым преимуществом такого разделения рабочей нагрузки является то, что внутри изолированного потока и без прерывания или влияния на скорость отклика и удобство использования основного потока вы можете выполнять дорогостоящие операции.
Как использовать веб-воркеров?
Воркеры и создатель воркеров общаются между собой, используя метод postMessage и прослушиватель событий onmessage. Здесь происходит вся магия.
- Проверьте, поддерживает ли браузер Workers!
- Вы создаете веб-воркер.
- Отправьте сообщение Worker с помощью метода postMessage. (пример: 2 числа, начало и конец)
- Рабочий прослушивает сообщение от создателя через прослушиватель событий onmessage. (Рабочий начинает свою работу. Пример: поиск простых чисел между началом и концом).
Поскольку это происходит в рабочем потоке, это не влияет на основной поток. - Рабочий выполняет задачи в фоновом режиме и отправляет сообщение через postMessage родителю.
Пример:
// Main.js file // Check for worker if(window.Worker) { // create a worker object with path for worker script as paramlet 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 threadonmessage = 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); }
Примечание:
- Один поток может создать n рабочих потоков.
- Рабочий также может порождать рабочих, а также так называемых вспомогательных рабочих.
- Мы также можем создавать Shared Workers с помощью конструктора SharedWorker. Подробнее об этом в следующей статье. Оставайтесь на связи для этого. Привет🤘