Мы всегда слышали и верили, что JavaScript является однопоточным. Также мы слышали, что многопоточность возможна с введением «Web Workers API». Но что это такое? 😕 😕

Пока я изучал то же самое, я понял, почему бы не изучить это вместе? В этом посте я попытался записать ответы на несколько вопросов, которые пришли мне в голову, например, что такое веб-воркеры? Нарушает ли это норму однопоточности JavaScript? И некоторые основы, которые помогут нам лучше понять это.

Что такое Web Workers?

Чтобы понять это легко, давайте сначала посмотрим, что такое API-интерфейсы браузера !! Браузер предоставляет несколько методов или интерфейсов, известных как API-интерфейсы браузера, которые дают нам сверхспособности для доступа к данным из браузера и окружающей компьютерной среды и связи с ними.

Самым простым из них является «Консольный» API. 🎉 🎉 Да, мы использовали один из API браузера. Помните операторы console.log, которые мы писали в нашем коде JavaScript? Консоль помогает нам печатать операторы в консоли браузера. Он скрывает сложность, необходимую для указания консоли браузера напечатать оператор.

Что ж, веб-воркеры - это простой API, предоставляемый браузером для создания фонового сценария в качестве потока в нашем веб-приложении. Это может помочь нам сохранить в фоновом режиме задания, требующие интенсивных вычислений, без блокирования пользовательского интерфейса или взаимодействия с пользователем.

Есть несколько типов рабочих. Мы не обсуждаем их в этом посте, но мы можем прочитать и узнать об этом здесь.

Как создать воркер в нашем приложении?

Как уже обсуждалось API-интерфейсы браузера, браузер предоставляет объект Worker, который скрывает сложности и помогает вам запускать ваш скрипт в другом потоке, чем основной поток, через код JavaScript.

Рабочие потоки могут быть созданы с помощью конструктора Worker, предоставляемого веб-API в браузерах.

Ниже мой модуль initiateWorker.js и рабочий скрипт (worker.js).

Я распечатал сообщение в журнале. Есть много других API, которые можно использовать в рабочем файле для достижения нашей цели использования веб-воркеров. Доступные функции и API перечислены на странице MDN.

Кроме того, тип сообщения, отправляемого рабочему, поддерживает основные типы, например, я отправил объект рабочему. Список поддерживаемых типов указан в блоге MDN.

Ниже приведен пример того, как я использовал открытый метод sendLog в компоненте React для регистрации любой навигации, выполненной по ссылке.

Если вы хотите узнать больше о том, как их использовать, вы можете обратиться к Использование веб-воркеров.

Что происходит при создании рабочего?

Итак, когда для скрипта создается воркер. Создается новый поток уровня ОС, который обрабатывает выполнение рабочего скрипта. Посмотрим, можно ли его увидеть в инструментах разработчика?

Если мы посмотрим на панель «Источник», Boom! Там же есть раздел "Темы". Раздел потоков обычно появляется, когда вы используете воркеры. Здесь мы видим 2 запущенных потока.

«Main» поток запускает основной JavaScript для вашего веб-приложения, а следующий поток соответствует рабочему потоку с именем сценария, используемого для создания рабочего потока.

Вы можете отлаживать, а также приостанавливать выполнение рабочего потока из раздела Threads.

ПРИМЕЧАНИЕ. В моем случае имя - это URL-адрес, созданный, поскольку я использовал `URL.createObjectURL` для получения URL.

Что это за поток и что происходит, когда мы выбираем рабочий поток?

Несколько замечаний о рабочем потоке:

  • У потока есть собственный экземпляр JS Engine.
  • Каждый объект Worker Global Scope имеет отдельный цикл событий, а его очереди задач содержат события, обратные вызовы и сетевую активность как задачи.
  • Веб-воркеры не имеют доступа к DOM API.
  • Поток выполняется в другом глобальном контексте, отличном от текущего окна. Таким образом, API, такие как LocalStorage и т. Д., Предоставляемые Window, недоступны для доступа с помощью Workers. Кроме того, если вы обращаетесь к объекту местоположения, он печатает местоположение сценария, которое использовалось для его запуска.
  • Обращается к основному потоку и другим рабочим потокам через «каналы сообщений». Как и в примере выше, основной поток и рабочий поток, оба общаются через «postMessage», который снова является методом, предоставляемым объектом Worker.
  • Во время выполнения рабочего цикла основной цикл событий никогда не блокируется; это только обработка результатов сообщения.

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

Как показано на диаграмме, рабочие потоки имеют свой собственный глобальный контекст выполнения и создают экземпляр JS Engine.

Подходя к тому, что происходит, когда мы выбираем рабочий поток на панели Источник, контекст переключается с основного на рабочий поток, стеки вызовов и т. Д., Чтобы показать информацию для рабочего потока. Пример MDN помогает в понимании.

Вывод: JavaScript по-прежнему однопоточный. Основной код нашего приложения работает как один поток, веб-воркеры запускают свой собственный поток и, таким образом, помогают запускать другие сценарии в фоновом режиме, поэтому выполнение основного потока не затруднено. Его можно использовать для повышения производительности приложения, перемещая дорогостоящий код в качестве фоновых заданий.

Поскольку это моя первая попытка написать блог, отзывы и аплодисменты будут обнадеживающими. 👏