Забудьте о трансформациях, нативном видео, семантических тегах и прочей бессмысленной чепухе в HTML5; веб-работники — лучшая функция для браузеров, так как JavaScript! Наконец, веб-работники позволяют разработчикам запускать текущие процессы в отдельном потоке.
Потоки звучат сложно, и некоторые языки разработки усложняют, но вы будете рады услышать, что реализация JavaScript хороша, а рабочий проект W3C стабилен. Веб-работники предлагают огромный прирост производительности на стороне клиента, но есть несколько вещей, на которые следует обратить внимание, прежде чем мы начнем…
Ограничения веб-работника
Веб-работники работают независимо от потока пользовательского интерфейса браузера, поэтому они не могут получить доступ ко многим функциям, которые разработчики JavaScript знают и любят. Основным ограничением является то, что веб-работники не имеют доступа к DOM; они не могут читать или изменять HTML-документ. Кроме того, вы не можете получить доступ к глобальным переменным или функциям JavaScript на странице. Наконец, доступ к некоторым объектам ограничен, например, свойства window.location доступны только для чтения.
Однако веб-работники могут использовать стандартные типы данных JavaScript, обрабатывать вызовы XMLHttpRequest (Ajax), использовать таймеры и даже импортировать других работников. Они идеально подходят для трудоемких задач, таких как анализ больших блоков данных, логика игрового ИИ, трассировка лучей и т. Д.
Поддержка Web Worker Browser
На момент написания статьи все последние версии Firefox, Chrome, Safari и Opera в некоторой степени поддерживают веб-работников. Угадайте, какой браузер отсутствует?
Неудивительно, что веб-работники не реализованы ни в одной версии Internet Explorer. Даже IE9 не предлагает поддержку, но я подозреваю / надеюсь, что она будет реализована в финальной версии. До этого времени у вас есть три варианта:
- Забудьте о веб-работниках еще на год или два.
- Примите, что ваше приложение сломается в IE.
- Реализуйте свой собственный веб-инструмент, который использует псевдопоточность на основе таймера или обработку массива . Это может быть не возможно или не желательно во всех приложениях.
Что такое веб-работник?
Веб-работник — это отдельный файл JavaScript, загружаемый и выполняемый в фоновом режиме. Есть два типа:
- Выделенные работники : они связаны с их создателем (сценарий, который загрузил работника).
- Совместно используемые работники : позволяют любому сценарию из того же домена (somesite.com) взаимодействовать с работником.
Сегодня мы смотрим на посвященных веб-работников …
Создание выделенного веб-работника
Чтобы создать выделенного веб-работника, вы передаете имя файла JavaScript новому экземпляру объекта Worker:
var worker = new Worker("thread1.js"); Общение с выделенным веб-работником
Поскольку веб-работник не может получить доступ к DOM или выполнить функции в скрипте страницы, все взаимодействие осуществляется через интерфейс событий. Сценарий веб-страницы передает один аргумент данных с помощью метода postMessage() и получает его обратно через onmessage события onmessage , например
pagescript.js:
var worker = new Worker("thread1.js"); // receive messages from web worker worker.onmessage = function(e) { alert(e.data); }; // send message to web worker worker.postMessage("Jennifer");
Сценарий веб-работника получает и отправляет данные через собственный onmessage события onmessage и метод postMessage() соответственно:
thread1.js:
self.onmessage = function(e) { self.postMessage("Hello " + e.data); };
Данные сообщения могут быть строкой, числом, логическим значением, массивом, объектом, нулевым или неопределенным. Данные всегда передаются по значению и сериализуются, а затем десериализуются в процессе обмена данными.
Обработка выделенных ошибок веб-работника
Код веб-работника вряд ли будет идеальным, и логические ошибки могут быть вызваны данными, передаваемыми скриптом страницы. К счастью, ошибки могут быть обнаружены с помощью обработчика события onerror. В событие обработчика передается объект с 3 свойствами:
- filename : имя скрипта, вызвавшего ошибку;
- lineno : номер строки, где произошла ошибка; и
- сообщение : описание ошибки.
pagescript.js:
worker.onerror = function(e) { alert("Error in file: "+e.filename+"nline: "+e.lineno+"nDescription: "+e.message); };
Загрузка дополнительных файлов JavaScript
Одна или несколько дополнительных библиотек JavaScript могут быть загружены внутри веб-работника с помощью importScripts() , например
importScripts("lib1.js", "lib2.js", "lib3.js");
В качестве альтернативы, вы могли бы загружать дополнительных веб-работников … но я бы рекомендовал сделать это простым, пока браузеры не догонят ваши амбиции по созданию потоков!
Остановка выделенного веб-работника
Поток веб-работника может быть остановлен с помощью метода close() , например
thread1.js:
self.onmessage = function(e) { if (e.data == "STOP!") self.close(); };
Это отбрасывает любые задачи, ожидающие обработки, и предотвращает дальнейшие события в очереди.
Это все, что вам нужно знать о специализированных веб-работниках. В моем следующем посте мы обсудим общих веб-работников — более сложного зверя!