В JavaScript существует несколько подходов к улучшению общего пользовательского интерфейса сайта. «Веб-работник» — один из таких подходов, который позволяет основному потоку продолжать выполнение без блокировки. Он включает в себя отдельный экземпляр механизма JavaScript и, следовательно, не может использовать функции основного потока.
В этой статье речь пойдет о том, как использовать «Веб-работник» для многопоточности в JavaScript.
Что такое веб-работники?
«Веб-работники» соответствует API браузера, который позволяет JavaScript запускать задачи параллельно/одновременно в отдельном/выделенном потоке.
Какова потребность в веб-работниках?
Поскольку JavaScript является однопоточным, сложные коды JavaScript блокируют поток пользовательского интерфейса, т. е. останавливают главное окно, которое выполняет все задачи по обновлению, реализации событий пользовательского ввода и т. д. В таком сценарии это влияет на взаимодействие с пользователем. . Чтобы справиться с этой проблемой, «Веб-работник» вступает в силу и устраняет блокировку потока пользовательского интерфейса.
Как использовать веб-воркеров для многопоточности с помощью JavaScript?
Сделать «Веб-работник» , используйте конструктор Worker. Он таков, что в качестве аргумента принимает URL-адрес, который соответствует пути к файлу рабочего сценария, реализующему желаемую функциональность. Однако, чтобы включить рабочий код в файл HTML, используйте «капля» написать рабочий код.
Синтаксис (создание веб-воркера)
константа Икс '=' новый Рабочий ( 'работник.js' ) ;Синтаксис (отправка сообщения работнику)
константа Икс '=' новый Рабочий ( 'работник.js' ) ;
Синтаксис (получение сообщения от работника)
Икс. onmessage '=' функция ( событие ) {консоль. бревно ( событие. данные ) ;
} ;
Пример: использование «Web Worker» для вычисления факториала числа в JavaScript
В следующем примере используется «Работник()» конструктор для создания веб-воркера и вычисления факториала числа:
< HTML >
< голова >
< стиль h2 '=' 'выравнивание текста: по центру'; > Пример веб-работников ч2 >
голова >
< тело >
< сценарий >
константа Икс '=' новый Рабочий ( URL-адрес. создатьОбъектURL ( новый Блоб ( [
`
// Рабочий скрипт
константа факт '=' ( н ) => {
если ( н == 0 || н == 1 ) {
возвращаться 1н ;
}
еще {
возвращаться БигИнт ( н ) * факт ( БигИнт ( н ) - 1н ) ;
}
} ;
себя. onmessage '=' ( событие ) => {
константа С '=' факт ( событие. данные ) ;
себя. сообщениеСообщение ( С. нанизывать ( ) ) ;
} ; `
] , { тип : 'текст/Javascript' } ) ) ) ;
Икс. сообщениеСообщение ( 15н ) ;
Икс. onmessage '=' ( событие ) => {
константа вне '=' событие. данные ;
консоль. бревно ( 'Факториал 15 через Web Worker-> ' , вне ) ;
} ;
тело >
HTML >
В этом коде выполните следующие шаги:
- Во-первых, укажите заявленный заголовок.
- После этого создайте «Веб-работник» объект, имеющий URL-адрес объекта Blob, содержащего код рабочего процесса.
- Код, посвященный рабочему процессу, включен в анонимную функцию, которая вычисляет факториал числа с помощью рекурсивной функции.
- Кроме того, работник прослушивает сообщения, отправленные через основной поток, используя «self.onmessage» событие, извлекает факториал переданного числа и передает результат в основной поток через метод «постСообщение()» метод.
- В основном потоке создайте рабочий экземпляр и отправьте ему сообщение с номером « 15н ». Здесь, ' н относится к значению BigInt.
- После того, как рабочий завершает вычисление факториала, он отправляет результат/выход обратно в основной поток, используя метод «постСообщение()» метод.
- Наконец, основной поток извлекает/получает результат в «по сообщению» событие и возвращает соответствующий факториал числа на консоли.
Выход
Преимущества веб-воркеров
Параллельная обработка : В случае параллельного выполнения одного и того же кода.
Отсутствие сбоев в выполнении кода: Выполнение кода выполняется независимо от обновлений и т. д. на текущей странице.
Отслеживание движения: Все обнаружение движения происходит в фоновом режиме.
Включена многопоточность: Они обеспечивают многопоточность в JavaScript.
Повышенная производительность: Оптимизируйте производительность, выполняя интенсивные/сложные задачи в отдельных потоках.
Эффективный пользовательский опыт: Это позволяет избежать блокировки основного потока, что обеспечивает более быстрое реагирование пользователя.
Ограничения веб-воркеров
Однако существуют и некоторые ограничения веб-работников. Они заявлены следующим образом:
- Большее использование памяти.
- Невозможно обновить DOM в рабочем потоке или вызвать объект окна.
Заключение
«Веб-работники» соответствует API браузера, который позволяет JavaScript запускать задачи одновременно в отдельном/выделенном потоке. Их можно использовать, приняв в качестве аргумента URL-адрес, который соответствует пути к файлу рабочего сценария. В этом блоге обсуждалось использование «Web Workers» для многопоточности в JavaScript.