Улучшает ли повторное использование символов производительность SVG? - PullRequest
Новая
       13

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

17 голосов
/ 22 декабря 2011

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

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

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

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

  • Есть ли какие-либо четкие шаблоны для <symbol> / <use> спектакль?
  • Насколько это уникально для отдельных реализаций браузера?
  • Есть ли различия между повторным использованием <symbol> против <g> против вложенных <svg>?

Ответы [ 3 ]

10 голосов
/ 31 июля 2015

Рохит Калкур сравнил скорость рендеринга создания 5000 символов SVG с использованием use с прямым созданием форм символа SVG, см. здесь . Оказывается, что рендеринг SVG фигур с использованием use был почти 50% медленнее. Он рассуждает так:

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

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

4 голосов
/ 22 декабря 2011

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

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

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

2 голосов
/ 22 декабря 2011

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

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

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

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

...