Как ускорить изменения Inline SVG - PullRequest
Новая
       23

Как ускорить изменения Inline SVG

1 голос
/ 16 мая 2019

В моем гибридном приложении для Android я использую встроенный SVG для отображения изображений большого размера (порядка 2 МБ) и сложных (несколько сотен элементов SVG на изображение). Когда мне нужно изменить изображение, я делаю следующее 

 var puzzle = document.createElementNS(SVGNS,'svg'),
 kutu = document.getElementById('kutu');   


 puzzle.id = 'puzzle';
 puzzle.setAttribute('preserveAspectRatio','none');
 puzzle.setAttribute('width','100vw');
 puzzle.setAttribute('height','85.5vh');
 puzzle.setAttribute('xmlns',SVGNS);
 puzzle.setAttribute('xmlns:xlink',XLINK);
 puzzle.setAttribute('fill-rule','evenodd');
 puzzle.setAttribute('clip-rule','evenodd');
 puzzle.setAttribute('stroke-linejoin','round');
 puzzle.setAttribute('stroke-miterlimit','1.414');
 puzzle.setAttribute('viewBox','0 0 1600 770');
 puzzle.innerHTML = SVG;
 //SVG here is the SVG image content shorn off the outer <svg>..</svg>

 if (0 < kutu.children.length) kutu.children[0].remove();
 //remove old image, iff any
 kutu.appendChild(puzzle);
 //append the new image

Пока это работает, процесс отображения нового изображения идет медленно. Я подозреваю, что это из-за присвоения innerHTML выше. Повторное выполнение последовательности createElementNS, puzzle.àppendChild потребовало бы от меня сначала проанализировать входящий необработанный SVG-контент и т. Д. Это путь или будет более быстрый способ отображения контента.

Еще раз для наглядности. SVG - это содержимое нового SVG-изображения, отображаемого без внешнего <svg>...</svg> упаковщика.

1 Ответ

0 голосов
/ 27 мая 2019

Примечание: вероятно, было бы лучше использовать setAttributeNS вместо setAttribute для обеспечения согласованности, поскольку используется createElementNS, хотя это может не повлиять на ускорение изменения изображения SVG.

В случае нативного приложения для анализа узких мест в производительности можно использовать инструмент, такой как Android Profiler при использовании Android Studio 3.0 и выше.Однако, поскольку ваше приложение является гибридным приложением, своего рода профилировщик производительности, применимый к гибридному приложению (будь то Ionic или Cordova и т. Д.), Может помочь точно определить узкое место вашей производительности.

Поскольку ваше приложение является гибридным, не зная ресурсных ресурсов вашего сеанса приложения для Android, можно предположить, что, возможно, это является причиной того, что он вызывает что-то вроде .setAttribute для установки атрибутов уровня сеанса на лету во время измененияобраз и ресурс сеанса могут быть недостаточными, а также DOM должен выполнять .innerHTML и appendChild, которые являются динамическими операциями.Манипулирование DOM, как известно, медленное.

Преобразование атрибутов всех SVG-файлов и сохранение результата в каком-либо хранилище или кеше, а при необходимости может быть полезно вызвать его из постоянного хранилища или кеша.

Или рассмотрите возможность использования AngularJS для предварительного изменения SVG и предварительной загрузки изображений SVG, см. для простой предварительной загрузки изображений в приложении Angular . Здесь - это другой код, аналогичный вашему, за исключением того, что он использует AngularJS для добавления SVG для начинающих.

Еще один более простой способ, без изменения кода, если вы могли бы заранее минимизировать входящие SVG, это использовать SVG Optimizer или SVGO, проект с открытым исходным кодом node.js для сжатия ваших SVG.Цитируется из ссылки на SVGO: «1024 *

» Файлы SVG, особенно экспортируемые из различных редакторов, обычно содержат много избыточной и бесполезной информации. Это может включать метаданные редактора, комментарии, скрытые элементы, стандартные или нестандартныеоптимальные значения и другие вещи, которые можно безопасно удалить или преобразовать, не влияя на результат рендеринга SVG. "Хотя прирост производительности может быть неочевидным в этом направлении.

...