JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:
Дополнительные особенности объекта Worker

Фоновые потоки выполнения, описываемые в этом разделе, являются выделенными фоновыми потоками: они связаны (или выделены из) с общим родительским потоком выполнения. Спецификация «Web Workers» определяет еще один тип фоновых потоков выполнения, разделяемые потоки выполнения. На момент написания этих строк броузеры еще не поддерживали разделяемые потоки выполнения. Однако их назначение состоит в том, чтобы играть роль именованного ресурса, который может предоставлять вычислительные услуги любым другим потокам выполнения. На практике взаимодействие с разделяемым потоком выполнения напоминает взаимодействие с сервером посредством сетевых сокетов.

Роль «сокета» для разделяемого потока выполнения играет объект Messa-gePort. Он определяет прикладной интерфейс обмена сообщениями, подобный аналогичному интерфейсу в выделенных потоках выполнения, а также используемому для обмена сообщениями между документами с разным происхождением. Объект MessagePort имеет метод postMessage и атрибут onmessage обработчика событий. Спецификация HTML5 предусматривает возможность создания связанных пар объектов MessagePort с помощью конструктора MessageChannel. Вы можете передавать объекты MessagePort (в специальном аргументе метода postMessage) другим окнам или другим фоновым потокам выполнения и использовать их как выделенные каналы связи. Объекты MessagePort и MessageChannel являются дополнительным прикладным интерфейсом, который поддерживается лишь немногими броузерами и здесь не рассматривается.

**************************************************

Наконец, объект

WorkerGlobalScope
включает конструкторы объектов, важных для клиентских сценариев. В их числе конструктор
XMLHttpRequest,
позволяющий фоновым потокам выполнять HTTP-запросы (глава 18), и конструктор
Worker
, дающий возможность фоновым потокам создавать свои фоновые потоки. (Однако на момент написания этих строк конструктор
Worker
был недоступен фоновым потокам в броузерах Chrome и Safari.)

Некоторые прикладные интерфейсы HTML5, описываемые далее в этой главе, определяют особенности, доступные как через обычный объект

Window
, так и через объект
WorkerGlobalScope
. Часто асинхронному прикладному интерфейсу объекта
Window
соответствует его синхронная версия в объекте
WorkerGlobalScope
. Эти прикладные интерфейсы «с поддержкой фоновых потоков выполнения» мы рассмотрим далее в этой главе.

22.4.3. Примеры использования фоновых потоков

Завершают этот раздел два примера использования фоновых потоков выполнения. Первый демонстрирует, как реализовать выполнение длительных вычислений в фоновом потоке, чтобы они не влияли на отзывчивость пользовательского интерфейса, обслуживаемого основным потоком выполнения. Второй демонстрирует, как можно использовать фоновые потоки для работы с простейшими синхронными прикладными интерфейсами.

В примере 22.6 определяется функция

smear,
которая принимает элемент
<img>
в виде аргумента. Она применяет эффект размытия для «смазывания» изображения вправо. Для реализации этого эффекта используется описанный в главе 21 прием копирования изображения в неотображаемый элемент
<canvas>
и последующего извлечения пикселей изображения с помощью объекта
ImageData
. Элементы
<img>
и
<canvas>
нельзя передать фоновому потоку выполнения с помощью метода
postMessage
, но можно передать объект
ImageData
(подробности во врезке «Структурированные копии» выше). Пример 22.6 создает объект
Worker
и вызывает его метод
postMessage
, чтобы передать ему изображение. Когда фоновый поток отправит обработанные пикселы изображения обратно, программный код скопирует их снова в элемент
<canvas>,
извлекая их как ресурс с URL-адресом вида data:// и устанавливая этот URL-адрес в качестве значения свойства
src
оригинального элемента
<img>
.

Пример 22.6. Создание фонового потока выполнения для обработки изображения

// Асинхронная замена изображения его смазанной версией.

// Используется так: <img src="testimage.jpg" onclick="smear(this)"/>

function smear(img) {

// Создать неотображаемый элемент <canvas> того же размера, что и изображение

var canvas = document.createElement("canvas");

canvas.width = img.width;

canvas.height = img.height;

// Скопировать изображение в холст и извлечь его пикселы

var context = canvas.getContext("2d");

context.drawImage(img, 0, 0);

var pixels = context.getImageData(0,0,img.width,img.height)

// Отправить пикселы фоновому потоку выполнения

var worker = new Worker("SmearWorker.js"); // Создать фоновый поток

worker.postMessage(pixels); // Скопировать и отдать пикселы

// Зарегистрировать обработчик для получения ответа от фонового потока

worker.onmessage = function(e) {