Web worker являются скриптами, которые выполняются в фоновом режиме и не оказывают влияния на скорость загрузки основной страницы.

Знакомство с web worker

Обратите внимание: IE10+, Chrome, Firefox, Opera и Safari имеют поддержку данной технологии.

В HTML все JavaScript скрипты на странице могли выполнятся только поочередно. В некоторых случаях пользователи должны были ожидать завершения выполнения скрипта пока они смогут продолжить взаимодействие с веб-страницами.

Благодаря технологии web worker в HTML5 стало возможным создание скриптов, которые будут выполняться в фоновом режиме и не будут влиять на скорость загрузки основной страницы.

Создание web worker

Так как web worker работают параллельно с основной страницей их код всегда должен быть вынесен в отдельный .js файл. После этого на нашей основной странице необходимо создать новый объект Worker с ссылкой на внешний файл скрипта:

var worker = new Worker(ссылка_на_файл_скрипта);

Если указанный файл существует браузер начнет загрузку скрипта новым потоком асинхронно. После того, как скрипт будет загружен мы можем запустить наш worker с помощью:

worker.postMessage();

Взаимодействие с web worker

Взаимодействие web worker с основной веб-страницей происходит с помощью специальных событий и метода postMessage(). Например событие message срабатывает, когда worker получает какое-либо сообщение.

<script>
//Создадим новый объект worker
var worker=new Worker("worker1.js");
//Отправим сообщение "Я изучаю HTML5 на" в наш worker
worker.postMessage("Я изучаю HTML5 на ");
//Выведем ответ полученный от worker на страницу
worker.addEventListener('message', function(event) {
  document.getElementById('reply').innerHTML='Наш worker ответил: <b>' + event.data + "</b>";
});
</script>

Всегда имейте ввиду что web worker не имеют доступа к:

• DOM структуре основной страницы
• Объекту window
• Объекту document
• Объекту parent

Обратите внимание: помимо текстовых строк мы можем передавать в worker JSON объекты. Узнать о JSON объектах больше Вы можете здесь.

Обратите внимание: не следует применять web worker для таких простых задач как в примере. Обычно использование web worker оправдано только для задач, которые требуют значительных ресурсов компьютера для их выполнения, например кэширование больших массивов с данными для дальнейшего использование, проверка текста на ошибки, подсветка синтаксиса или другие операции с форматированием текста в реальном времени, обновление больших объемов информации в базах данных, анализирование видио или аудио файлов и др.

Выключение web worker

После того, как worker был создан он будет ожидать сообщения от основной страницы даже когда выполнение его кода завершится, поэтому Вы всегда должны явно завершать работу worker когда он больше не нужен.

Чтобы завершить работу worker и освободить ресурсы компьютера Вы должны использовать метод termitane():

worker.terminate();

Использование web worker в старых браузерах

Прежде чем использовать web worker необходимо проверить поддерживает ли эту технологию браузер пользователя.

Это можно сделать с помощью следующей конструкции:

if( typeof(Worker) !== "undefined" ) {
  //Браузер пользователя имеет поддержку web worker
}
else {
  //Браузер пользователя не поддерживает web worker
}