Что такое Web Workers

Доброго времени суток %username%.

Я недавно вплотную увлекся технологией canvas, и передо мной встала потребность выполнять некоторые действия по отрисовки элементов очень быстро, не останавливая другие процессы. По-этому в этой статье, хочу поговорить о технологии Web Workers.

Web Workers — это технология из HTML5 позволяющая исполнять задачи JavaScript параллельно, не блокируя при этом другие процессы. Тем самым, задачи обрабатываются в параллельных потоках, и вам не нужно ждать пока обработается первая задача, что бы стала выполняться следующая.

Как это всё работает?

В отдельные JavaScript-файлы выносятся функции, которые отвечают за обработку «тяжелых данных» и которую следует производить в фоновом режиме. Такие файлы называются «работниками» или «Worker» и их может быть столько, сколько вам нужно.

И так, Worker — это скрипт, который может быть загружен и выполнен в фоновом режиме.

Также есть некоторые ограничения:

1. Worker не имеет доступа к DOM;
2. Worker не имеет прямого доступа к родительской странице;
3. Worker не имеет доступа к window, так что alert и тому подобное работать не будет;
4. Worker имеет доступ к объектам JavaScript, таким как Object, Array, Date, Math, String;
5. Worker имеет доступ к объектам navigator, location, XMLHttpRequest и функциям setTimeout(), и setInterval().

Так как работник имеет ограниченный доступ к станице, с ним нужно обмениваться сообщениями, и об этом мы поговорим чуть ниже.

Поддерживает ли браузер Web Workers?

if (!!window.Worker) { alert ('Да поддерживает!'); }

Как использовать Web Workers?

Для начала использования работника нужно создать специальный объект Worker.

var worker = new Worker("worker.js");

Созданный объект worker обладает следующими методами:

postMessage(); // метод с помощью которого мы говорим с работником, а он с нами.
onmessage(); // метод вызывается при поступлении ответа.
onerror(); // метод вызывается при возникновении ошибки.

Функционал не большой, что очень хорошо.

Небольшой пример работы:

Основная программа

var worker = new Worker('worker.js'); worker.postMessage('Hello Worker!');
worker.onmessage = function(e) { alert(e.data); };

Скрипт работника (worker.js)

onmessage = function(e) { if ( e.data === "Hello Worker!" ) { postMessage('Hello World!'); } };

Вот и всё. Основной скрипт создаёт нового работника и приветствует его (‘Hello Worker!’), работник получает это сообщение и приветствует основную программу. Обмениваться с работником можно не только строками, но и сложными объектами.

Есть ещё одни важный момент. При использовании работника и технологии Ajax используйте синхронные запросы, т.к. при асинхронных запросах, работник закончит работу не дожидаясь ответа от сервера.

Работает в Opera, Firefox, Chrome и Safari. Хотят сделать и в IE 10.

#javascript, #html5