Доброго времени суток %username%.
Я недавно вплотную увлекся технологией canvas, и передо мной встала потребность выполнять некоторые действия по отрисовки элементов очень быстро, не останавливая другие процессы. По-этому в этой статье, хочу поговорить о технологии Web Workers.
Web Workers — это технология из HTML5 позволяющая исполнять задачи JavaScript параллельно, не блокируя при этом другие процессы. Тем самым, задачи обрабатываются в параллельных потоках, и вам не нужно ждать пока обработается первая задача, что бы стала выполняться следующая.
Как это всё работает?
В отдельные JavaScript-файлы выносятся функции, которые отвечают за обработку «тяжелых данных» и которую следует производить в фоновом режиме. Такие файлы называются «работниками» или «Worker» и их может быть столько, сколько вам нужно.
И так, Worker — это скрипт, который может быть загружен и выполнен в фоновом режиме.
Также есть некоторые ограничения:
- Worker не имеет доступа к DOM;
- Worker не имеет прямого доступа к родительской странице;
- Worker не имеет доступа к window, так что alert и тому подобное работать не будет;
- Worker имеет доступ к объектам JavaScript, таким как Object, Array, Date, Math, String;
- 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.