HTML5 Web Workers и AJAX

21 октября 2011 г.

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

Суть технологии проста — в отдельные файлы выносятся функции, обеспечивающие функционирование AJAX, либо функции обрабатывающие большие массивы информации, которые во время работы уменьшают скорость построения страницы. Таких файлов может быть столько сколько нужно. При выполнении скрипта на стороне браузера создается специальный объект Worker, который и отвечает за вызов необходимых функций. Многие современные браузеры поддерживают данную технологию, кроме, конечно же, IE, включая 9 версию.

HTML
Теперь о том, как использовать работников.
Проверим поддержку объекта браузером:

if (!!window.Worker) 
{
//технология поддерживается
}

Создается объект очень просто:

var worker = new Worker(имя файла с исполняемой функцией);

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

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

Теперь сделаем сам файлик worker`а и назовем его worker.js. Внутрь поместим следующий код:

onmessage = function(ev) 
{
var answ = ev.data;
};

Объект и файл у нас есть, теперь остается только его вызвать делается это так:

var worker = new Worker('worker.js');
worker.postMessage('Hellow World');

Переменная ev будет содержать объект, в свойстве data, которого будет находится то, что мы передадим в функцию, в нашем случае строка ‘Hellow World’. Передавать можно что угодно, в том числе сложные объекты. Теперь сделаем, чтобы наш работник, что-нибудь нам вернул. Для этого в код работника последней строкой допишем следующее:

postMessage(answ);

А в основном скрипте определим метод, который будет вызван при поступлении сообщения от работника:

worker.onmessage = function (event) 
{
alert(event.data); 
};

Вот собственно и все! Вернуть работник нам также сможет любые данные. Стоит помнить о нескольких важных моментах, таких как:

  1. Работник не может получить доступ к DOM ни в каком виде. Ни одна функция работающая с DOM получающая данные о его состоянии или модифицирующая его, внутри работника недоступна. В том числе alert().
  2. Работник имеет доступ к:
    1. navigator
    2. объект location (только чтение)
    3. метод importScripts() (для доступа к файлам сценариев в том же домене)
    4. объекты JavaScript, такие как Object, Array, Date, Math, String
    5. XMLHttpRequest
    6. методы setTimeout() и setInterval()

Так в чем же собственно мультипоточность? А в том, что объектов работников может быть сколько угодно и все они могут работать одновременно, при этом формирование страницы не будет остановлено, в ожидании пока отработает, какая-либо функция.

А теперь о важном, о том, чего нет ни в одной статье про работников: для того чтобы получить адекватный ответ при использовании технологии AJAX, необходимо отсылать СИНХРОННЫЕ запросы методом POST. Беспокоиться о том, что все встанет, не стоит, так как работник выполняется в отдельном потоке, основной скрипт будет работать дальше без остановок. При использовании данной технологии для выполнения простых действий выигрыш в скорости будет минимален. Однако при сложных вычислениях можно существенно ускорить работу системы.

Всех, кто дочитал, благодарю за внимание.

Теги: •
рубрика Сайтостроение