Structured clone и transferables

Вы переносите задачу обработки изображения на 40 МБ в воркер — и главный поток всё равно замирает на 40 мс, прежде чем воркер даже начнёт. Работа переехала, но данные — нет.

Алгоритм structured clone

postMessage(data) не делит data — он делает его глубокую копию через алгоритм structured clone. Structured clone обрабатывает объекты, массивы, Map, Set, Date, типизированные массивы, Blob и ArrayBuffer. Он не обрабатывает:

• Функции (молча отбрасываются)
• DOM-узлы (бросает исключение)
• Прототипы классов — методы теряются, выживают только свойства данных

Копия синхронна на отправляющем потоке и масштабируется с размером payload-а: примерно 1 мс на МБ для плоских объектов, больше для глубоко вложенных структур. Отправьте объект на 50 МБ — и вы заблокировали отправляющий поток на ~50 мс — вы переместили работу, но заплатили за это налог на клонирование.

Transferables: передача владения за O(1)

Побег от стоимости клона — механизм transferable. Передайте второй аргумент в postMessage — список transferable-объектов:

postMessage({ pixels, width, height }, [pixels.buffer]);

Вместо копирования байтов браузер отдаёт нижележащую память принимающему потоку и отсоединяет её от отправителя. После передачи:

• pixels.buffer.byteLength равен 0 у отправителя
• Получатель имеет новый view с полными данными

Стоимость падает с O(size) до O(1). Transfer — правильный ход для больших бинарных payload-ов: bitmap-ы изображений, аудиобуферы, содержимое файлов.

Типы transferable: ArrayBuffer, MessagePort, ImageBitmap, OffscreenCanvas, ReadableStream, WritableStream, TransformStream.

Что теряется при structured clone

При postMessage объекта с методами:

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
  distanceTo(other) { ... }
}
const p = new Point(1, 2);
worker.postMessage(p);
// Воркер получает: { x: 1, y: 2 } — метода distanceTo нет

Structured clone копирует свойства данных, но не имеет представления для функций или прототипных цепочек. По дизайну: функции ссылаются на замыкания, которые могут держать DOM-узлы или другое состояние только главного потока. Правило: сериализуйте данные, не поведение. Пересоздайте класс на принимающей стороне при необходимости.