Передача элементов (SVG) в веб-воркер

У меня есть этот веб-сайт, где мне нужно иметь возможность делать «моментальные снимки» анимированного SVG на разных этапах его анимации (медленный процесс). Параллельно идет анимация (быстрый процесс). Итак, я создаю клон и в фоновом режиме сериализую SVG на разных этапах анимации и загружаю полученные изображения на сервер.

Однако все это работает в фоновом режиме довольно медленно и имеет тенденцию замедлять анимацию оригинального SVG. Возможно ли сделать все это в веб-воркере? При необходимости рабочий процесс может получить исходный файл SVG самостоятельно.

Я уже знаю, что передача элемента DOM невозможна:

//main.js
var s = new XMLSerializer();
worker.postMessage(s.serializeToString(svg))

//worker.js
parser = new DOMParser();
doc = parser.parseFromString(e.data, "text/html");

//ERROR
Uncaught ReferenceError: DOMParser is not defined

И кажется, что просто передать объект тоже не вариант:

//main.js
worker.postMessage(JSON.stringify(svg))

//worker.js
svgObject = JSON.parse(e.data);
console.log(svgObject)

//console output (just an empty Object prototype)
Object {}

Стоит ли использовать вариант веб-работника, зная, что мне понадобятся такие вещи, как:

  • XMLSerializer (поскольку DOMParser недоступен, я не знаю об этом)
  • document.createElementNS(SVG_NAMESPACE, 'text') (мне нужно создать элементы в SVG)
  • var img = new Image(); img.src = 'data:image/svg+xml;utf8,' + svgString (мне нужно создать образ для захвата сериализованной версии SVG)
  • element.style.strokeDashoffset = 0 (мне нужно иметь возможность стилизовать SVG)
  • SVGPolylineElement.prototype.getTotalLength (у меня есть пара полифилов на прототипах типа SVG, чтобы посчитать, но их всегда можно превратить в функции)

person Sheraff    schedule 25.07.2017    source источник
comment
Вы не можете использовать веб-воркеры для прикосновения к DOM, что, похоже, замедляет вашу анимацию. Если нет необходимости снимать это пока, делайте это за кадром во время простоя и делайте снимки там. Таким образом, вам не нужно рисовать SVG, что обычно является дорогостоящей частью.   -  person Jared Smith    schedule 25.07.2017
comment
@JaredSmith Да, совершенно не обязательно снимать это, пока это происходит. В любом случае анимация заканчивается задолго до того, как будут сделаны все снимки! Но веб-сайт предназначен для просмотра таких анимаций, поэтому я никогда не знаю, когда будет время простоя и как долго. Отсюда и идея использования веб-воркеров.   -  person Sheraff    schedule 25.07.2017
comment
@JaredSmith Прямо сейчас это делается на клоне, который на самом деле никогда не добавлялся в DOM, затем сериализуется и используется как src для <img>, никогда не добавлявшегося в DOM, копируется в canvas (опять же, вне DOM), а затем загружается в сервер.   -  person Sheraff    schedule 25.07.2017
comment
Единственный другой совет по производительности, который я бы дал вам, — убедиться, что вы ставите эти задачи в очередь, а не позволяете им выполняться последовательно через что-то порядка setTimeout(task, 0);. Это, по крайней мере, гарантирует, что блокируются только отдельные задачи, а не весь конвейер.   -  person Jared Smith    schedule 25.07.2017


Ответы (1)


Похоже, вы вызываете директиву JavaScript "use strict" в своем коде, и в этом случае вам просто нужно объявить переменную "parser" с помощью "var":

var parser = new DOMParser();

PS. Спасибо, ваш код помог с моим собственным расширением для браузера....

person Jody Brabec    schedule 29.09.2017
comment
Я определенно не призываю к «строгому использованию». Я никогда этого не делаю. Мне нравится беспорядочный код :) Тогда это сработало для вас? - person Sheraff; 18.10.2017
comment
Когда вы используете JavaScript DOMParser API без «использования строгости», это обычно вызывает ошибку ReferenceError Uncaught ReferenceError: DOMParser is not defined. (PS Я тоже люблю беспорядочный код, но 'use strict' убирает многие бомбы замедленного действия - мой юный кодер :) - person Jody Brabec; 19.10.2017