Веб-воркеры в JavaScript.

Как мы можем добиться параллелизма в Javascript?

Привет, ребята! В этой статье я расскажу об одной из самых интересных функций JavaScript — Web Workers. Javascript имеет много узких мест, таких как производительность, совместимость с браузерами и доступность. Как и в случае с этим, одним из недостатков является его однопоточная природа, JavaScript не может выполнять несколько задач одновременно. Например, допустим, вы создаете крупномасштабное веб-приложение, которое включает в себя непрерывные события пользовательского интерфейса, запросы и обработку огромного количества данных API и обработку DOM.

К сожалению, мы не можем обрабатывать все это одновременно, потому что выполнение скрипта происходит в среде одного потока. Мы пытаемся воспроизвести параллелизм с помощью setTimeout(), setInterval(), XMLHttpRequest и события. обработчики. Они обеспечивают асинхронный характер, но это не одно и то же. Асинхронные события обрабатываются после завершения текущего исполняемого скрипта.

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

Выделенные веб-воркеры — этот скрипт используется как мой единственный скрипт.
Общие веб-воркеры. Они совместно используются несколькими сценариями в окнах или фреймах, только если домен веб-воркеров и скриптов один и тот же.
Сервис-воркеры — это особые виды веб-воркеров, они действуют как прокси между браузером (клиентом) и сетью. Они могут принимать исходящие запросы, позволяют использовать API Push(Push Notification) и Background Sync.

В этой статье мы будем говорить о выделенных веб-воркерах, а вскоре в следующих статьях я расскажу о Shared и Service Worker API.

Веб-воркер не имеет доступа к глобальному контексту (объект глобальной области), объект окна доступен, но недоступен напрямую, они доступны через общий миксин WindowOrWorkerGlobalScope, с помощью этого миксина, у них есть свой WorkerGlobalScope (производный). Проще говоря, вы не можете получить доступ к глобальным переменным JavaScript в веб-воркерах, вы должны использовать WorkerGlobalScope, некоторые из общедоступных API: atob(), btoa(), clearInterval(), clearTimeout( ),dump() , setInterval(), setTimeout(), Вот список всех доступных API.

Ага! Поскольку мы знаем, что веб-воркеры работают в изолированном потоке, поэтому их нужно было писать в отдельном файле, прежде чем выполнять какой-либо код, нам нужно создать объект Worker на нашей главной странице, например этот

let worker = new Worker('web-worker.js');

web-worker.js это ваш рабочий файл (путь к файлу. здесь он находится в корневом каталоге), рабочий не начнет работать, пока ваш данный файл не будет полностью загружен и выполнен, если ваш файл не существует или не загружается, ваш рабочий тихо потерпит неудачу (печально, но верно😥). Связь между Worker и родительской страницей осуществляется с помощью Модели событий и метода postMessage(), postMessage() принимает один параметр в виде объекта JSON или строки.

Позвольте мне привести вам простой пример. Вот наш основной скрипт (родительский скрипт).

// main.js
let worker = new Worker('web-worker.js');
worker.addListener('message',(e) => {
    console.log('Hey! Workers Said : ', e.data);
},false);
worker.postMessage('This message is from Parent to Web Worker');

Код нашего веб-воркера будет выглядеть примерно так:

// web-worker.js
self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

Объяснение

Здесь postMessage() из main.js отправляет сообщение веб-воркеру, а наш воркер обрабатывает это сообщение, определяя событие onmessage, и наоборот.

Давайте напишем простую программу, у нас будет три кнопки, START THE WROK POST MESSAGE и STOP THE WORK

main.js, который будет нашим родителем для веб-воркера, будет выглядеть примерно так:

И наш worker.js будет примерно таким...

Здесь Начало работы означает, что мы зарегистрируем наш веб-воркер в клиенте, и сообщение отправки отправит сообщение работнику, в ответ веб-воркер может отправить соответствующее сообщение.

В нашем main.js мы постоянно прослушиваем сообщение от работника. Мы можем остановить работу с помощью worker.terminate() API, я добавил задержку в 100 мс, чтобы получить ответ от воркера.

Вот как это выглядит на самом деле,

Получите полный исходный код здесь.

Это все об этой статье, пожалуйста, сообщите мне, понравилась ли вам эта статья в комментариях, и чтобы получать уведомления о моей следующей статье, подписывайтесь на меня, а до тех пор вы можете связаться со мной в Twitter или DM на Discord.

Первоначально опубликовано на https://adarsh-thakur.hashnode.dev.

Веб-воркеры в JavaScript.