VDS за 300р от нашего партнера SpaceWeb
[315]
30 Мар 2012, 19:13

Что такое 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.

Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Найди ответ на любой вопрос по Веб-разработке!
задать вопрос...
Вы можете разместить Рекламный пост самостоятельно, либо отправив контент по адресу admin@webonrails.ru→ Оплата здесь ←Неоплаченные посты удаляются.
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 18045]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 11868]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 11867]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 9640]
[125]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 8901]
[315]
11 Авг 2011, 00:21
Спецификация HTML5 от W3C
[просмотров 7397]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 5800]

Вести с Хабра