Автор оригинала: FreeCodeCamp Community Member.
Дэнни Маквавс
С непрерывными улучшениями, выполненными в JavaScript Megines, и постоянно расширяющийся список устаревших и новых API к спецификации ECMAScript, квест для пылающих веб-приложений никогда не был больше на подъеме.
Какой двигатель JavaScript?
Двигатель JavaScript – это виртуальная машина. А Виртуальная машина Относится к программному обеспечению эмуляции данной компьютерной системы. Основная задача механизма JavaScript – взять код JavaScript, который разработчик записывает и преобразует его в быстрый, оптимизированный код, который можно интерпретировать браузером.
Обычно этот процесс работает на одном нить (Подробнее о потоках позже), с каждым утверждением кода разработчика выполняется по одному за раз. Проблема с однопоточными приложениями/архитектурой является то, что если какое-либо оператор или блок отчетов занимает много времени для завершения, все последующие заявления зависают до этого оператора/блок заявок. Это известно как Блокировка Отказ Чтобы избежать блокировки, программа должна быть многопоточной.
Резьба
Поток представляет собой контекст выполнения, который является всей информацией, которую требуется CPU для выполнения потока инструкций.
Предположим, вы читаете книгу, и вы хотите сделать перерыв прямо сейчас, но вы хотите иметь возможность вернуться и возобновить чтение с точной точки, где вы остановились. Один из способов добиться этого, связан с номером страницы, номер линии и номер слов. Таким образом, ваш контекст исполнения для чтения книги – это три числа.
Если у вас есть сосед по комнате, и она использует одну и ту же технику, она может взять книгу, пока вы не используете ее, и возобновите чтение от того, где она остановилась. Тогда вы можете вернуть его обратно и возобновить его откуда вы были.
Темы работают так же. ЦП дает вам иллюзию, что он делает несколько вычислений одновременно. Это делает это, потратив немного времени на каждый вычислений. Это может сделать это, потому что он имеет контекст выполнения для каждого вычисления.
Как вы можете поделиться книгой с вашим другом, многие задания могут поделиться процессором. Этот процесс называется Multi-Threading, и он решает Блокировка Отказ Для поддержки мультипоток на передней части были созданы веб-работники.
Веб-работники
Веб-работники позволяют многопоточать на переднем конце, неренив новых фоновых нитей и беговые сценарии в изоляции. В результате скрипты, выполненные работниками, должны содержаться в отдельных файлах. Поскольку веб-работники выполняют скрипты в изолированных нитках, скрипты не мешают основной нити и, следовательно, не прерывают интерфейс UI.
Создание веб-работника
Для дидактических целей выдержка скрипт ниже должен быть запущен в отдельной резьбе.
### fetch.js
self.addEventListener('message', e => {
let url = e.data;
fetch(url).then(res => {
if (res.ok) {
self.postMessage(res);
} else {
throw new Error('error with server');
}
}).catch(err => {
self.postMessage(err.message);
});
})let worker = new Worker('fetch.js');Конструктор принимает имя сценария как аргумент. Если указанный файл существует, работник порождает новую тему, а затем полностью загрузил и выполняет скрипт. Если файл недоступен, работник не работает молча.
Используя веб-работники
Веб-работники общаются с родительской нитью (создатель рабочего), используя событие Модель и сообщения. Использует MessagePort Объекты за кулисами и, таким образом, поддерживают все те же функции, такие как отправка структурированных данных и передача двоичных данных.
Получать сообщения от работника, используйте OnMessage Обработчик событий на Работник объект.
worker.onmessage = (e) => { // block statements }Вы также можете использовать addeventListener метод.
worker.addEventListener('message', (e) => { // block statements })Получить сообщение внутри работника, OnMessage Метод обработчика событий используется.
onmessage = (e) => { // blocks of statements }Вы также можете использовать addeventListener метод как иллюстрированный в fetch.js Отказ
Чтобы отправить данные в и с работника, используйте PostMessage () метод. Структурированные данные, такие как текст и JSON, могут быть отправлены по этому каналу связи. Подробнее о типах данных, которые поддерживаются MessagePort над здесь Отказ
worker.postMessage('some-lousy-data');
// in the parent thread
self.postMessage('some-resulting-data');
// in the worker thread.Это конкретное ограничение передачи сообщений на месте по ряду причин: он надежно сохраняет работник ребенка (так как он не может, наклонно, влияет на родительский скрипт), и он сохраняет родительскую страницу безрезультатно (наличие DOM BE Безопасность потоков будет логистическим кошмаром для разработчиков браузера).
Завершение рабочих и обработке ошибок
Если вам нужно немедленно прекратить рабочий работник от основного потока, вы можете сделать это, позвонив на терминальный метод работника:
worker.terminate();
В рабочей нити работники могут закрыться, вызвав свой собственный метод закрытия:
close();
Рабочий поток немедленно убит без возможности завершить свою деятельность или убирать после себя.
Ошибки времени выполнения могут обрабатываться явно прослушиванием для события ошибки, которое может быть уволено на Работник объект.
worker.addEventListener('error', (e) => { // block of statements })Ограничения веб-работника
- Все сценарии веб-работников должны быть поданы из того же домена.
- Вы не можете иметь прямой доступ к DOM и глобальному документу.
- Объект окна обнажает ограниченные API. Например,
РасположениеиНавигаториXMLHTTPREQUESTобъекты. - Ограниченный локальный доступ. Веб-работники не работают над статическими файлами. Например
Файл://my/file/on/my/computerОтказ
Если вы используете работник для обработки задачи, которая в конечном итоге необходимо обновить основной пользовательский интерфейс, вам нужно будет использовать систему обмена сообщениями для передачи данных между работником и основным приложением. Основное приложение тогда несет ответственность за обновление UI.
Точно так же, если ваш работник нуждается в доступе к данным из документа, окна или родительских объектов, вам нужно будет отправить его в PostMessage () Вызов, который используется для запуска рабочего.
Заключение
Создание веб-работников будет порождать реальные нити уровня ОС, которые потребляют системные ресурсы. Просто осознайте, что это повлияет на производительность всего компьютера пользователя, а не только веб-браузер. Таким образом, веб-работники должны использоваться ответственно и закрыты, когда они больше не используются для освобождения ресурсов для других приложений.
Использование веб-работников может оказать значительное влияние на производительность веб-приложений; И более отзывчивые приложения имеют хороший эффект на пользовательский опыт.
Для более подробной информации о веб-работниках, таких как импортирование сценариев на рабочих и областях веб-работников, пожалуйста, посетите MDN или Whatwg Отказ
Для полнофункционального примера веб-работников посетите здесь Отказ