Использует ли повторное использование символов улучшенную производительность SVG?

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

  • В документе может быть настроено столько отдельных элементов формы (<circle>, <line> и т.д.) с их собственными атрибутами.
  • Документ может быть настроен как несколько элементов <symbol> и множество отдельных экземпляров <use>, которые размещают их и соответственно их размер (W3 spec).

Я понимаю причины семантики и кода для использования <symbols>/<use>, но сейчас я не занимаюсь этим, я строго оптимизирую производительность рендеринга, преобразования и DOM. Я мог видеть, что <symbol> работает подобно повторному использованию спрайтов во Flash, сохраняя память и обычно являясь хорошей практикой. Тем не менее, я был бы удивлен, если разработчики браузеров так думают (и это не является целью этой функции).

Изменить: я не ожидаю, что базовые символы будут изменены или добавлены в течение жизненного цикла SVG, только местоположения экземпляра, размеры и т.д.

  • Есть ли четкие шаблоны для производительности <symbol>/<use>?
  • Как индивидуально это относится к отдельным реализациям браузера?
  • Существуют ли различия между повторным использованием <symbol> vs <g> vs inested <svg>?

ОТВЕТЫ

Ответ 1

Rohit Kalkur сравнивает скорость рендеринга создания 5000 символов SVG с использованием use против непосредственного создания форм символов SVG, см. здесь. Оказывается, что рендеринг SVG с использованием use был почти 50% медленнее. Он объясняет, что:

Элемент use принимает узлы из документа SVG и дублирует их в неопубликованной DOM

Учитывая это, я предполагаю, что использование SVG symbol в лучшем случае является показателем как вручную, создающим форму symbols.

Ответ 2

Я бы посоветовал вам не вместить элементы use > . Это, как известно, вызывает замедление в большинстве браузеров, см. здесь и здесь.

В общем случае, хотя он должен быть быстрым, по крайней мере, до тех пор, пока сам шаблон не сильно изменится (поскольку, если вы это сделаете, каждый из экземпляров также должен быть обновлен, и каждый из них может отличаться от отдых из-за наследования CSS).

Между <svg> и <symbol> не существует большой разницы на функциональном уровне, они оба позволяют вам определить систему координат (через атрибут 'viewBox'). Элемент <g> не позволяет вам это делать. Обратите внимание, что элементы <symbol> невидимы, если не указано значение <use> , тогда как <svg> и <g> являются видимыми по умолчанию. Однако в большинстве случаев желательно, чтобы шаблон был дочерним элементом элемента <defs> .

Ответ 3

Если вы измените содержимое элемента ag или svg, пользовательский интерфейс может посмотреть на область, в которую было нарисовано старое содержимое, и где будет нарисовано обновление, и просто перерисовать эти две области, даже перерисовать только один раз, если они являются то же самое изменение цвета фигуры.

Если вы обновляете содержимое символа, все экземпляры должны быть перерисованы. Это сложнее сделать, вычисляя для каждого экземпляра, где старые и новые части перерисовываются, так как на участки могут влиять преобразования и проще просто перерисовать все части всех экземпляров. Некоторые браузеры могут делать первые, а некоторые - последние.

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

Конечно, если вы просто перемещаете отдельные экземпляры символов, а содержимое статично, отслеживание не требуется, и производительность, вероятно, будет одинаковой.