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

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

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

Использование элемент принимает узлы внутри SVG документа и дублирует их в не подвергавшихся воздействию DOM

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