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

Роль «сокета» для разделяемого потока выполнения играет объект 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) {

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

 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); // Скопировать и отдать пикселы

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

 worker.onmessage = function(e) {

<b>    var smeared_pixels = e.data;                // Пикселы, полученные от потока</b>

 context.putImageData(smeared_pixels, 0, 0); // Скопировать в холст

 img.src = canvas.toDataURL(); // А затем в изображение

 worker.terminate(); // Остановить поток

 canvas.width = canvas.height = 0; // Освободить память

 }

}

В примере 22.7 приводится программный код реализации фонового потока, используемого в примере 22.6. Основу этого примера составляет функция обработки изображения: модифицированная версия примера 21.10. Обратите внимание, что этот пример настраивает свою инфраструктуру обмена сообщениями единственной строчкой программного кода: обработчик события onmessage просто накладывает эффект смазывания на изображение и сразу же отправляет его обратно.