Анализ применения SVG в качестве background-image
В последнее время все чаще появляются статьи, в которых авторы рекомендуют использовать SVG для backgroud-image. Действительно, применение SVG приносит большую пользу. Во всех прочитанных статьях очень вскользь упоминалось про производительность отрисовки SVG, что это более затратная операция, так как браузеру необходимо каждый раз заново отрисовывать растр.
И вот в один прекрасный день, открыв одно веб-приложение, я заметил, что мой браузер безумно «пожирает» память — одна вкладка «ела» около 600 МиБ. На МacBook с ретиной дела обстояли еще хуже. С этого момента началось расследование, куда же течет память. Кому интересно, добро пожаловать под кат.
Первым, на что я обратил внимание, был рост памяти при открытии одного попапа, в котором отрисовывались всего 20 элементов с иконками. Сделав профайлинг в chrome, я сделал вывод, что дело не в javaScript, не в CSS, и не в HTML.
Однако я заметил, что чем меньше присутствует элементов с иконками, тем меньше памяти расходуется. Посмотрев, откуда берутся иконки, я увидел, что они взяты из спрайта размером 2000px х 500px. После подмены SVG спрайта на PNG спрайт с такими же размерами, случилось чудо — использование памяти вернулось в разумные рамки. Порассуждав, легко прийти к выводу, что на каждую маленькую иконку отрисовывался большой битмап, на который и расходовалась память.
Первая мысль, которая пришла мне в голову — отказаться от SVG. Но взять и просто заменить на png нельзя, так как мы заботимся о пользователях, имеющих мониторы высокой четкости.
Прочитав спецификацию [1] по SVG и большое количество различных статей (ссылки в конце статьи), я решил попробовать задавать размер SVG не в px, а в em. В итоге, как я и ожидал, с относительными единицами объем потребляемой памяти оказался приблизительно равным тому, как если бы использовался png-спрайт.
Ниже приведена таблица потребления памяти в chromium на моей машине при отрисовке 16 иконок:
| SVG, размеры заданы в em | 9 216k | демо [2] |
| SVG, размеры заданы в px | 101 600k | демо [3] |
| PNG, малый размер холста | 7 748к | демо [4] |
| PNG, большой размер холста | 10 060k | демо [5] |
Какие же выводы можно сделать? Возможны два варианта. Первый — использовать два спрайта PNG, в обычном и ретиновском качестве. Если же вы используете SVG-спрайты, задавайте размер в относительных единицах, например в em.
Список статей, которые рекомендую почитать на тему SVG:
coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/ [6]
habrahabr.ru/post/141654/ [7]
www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ [8]
www.w3.org/TR/SVG/ [1]
smus.com/canvas-vs-svg-performance/ [9]
Автор: mavrin
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-razrabotka/29406
Ссылки в тексте:
[1] спецификацию: http://www.w3.org/TR/SVG/
[2] демо: http://mavrin.github.com/svgPerformance/svg_em.html
[3] демо: http://mavrin.github.com/svgPerformance/svg_px.html
[4] демо: http://mavrin.github.com/svgPerformance/png_small.html
[5] демо: http://mavrin.github.com/svgPerformance/png_big.html
[6] coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
[7] habrahabr.ru/post/141654/: http://habrahabr.ru/post/141654/
[8] www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/: http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
[9] smus.com/canvas-vs-svg-performance/: http://smus.com/canvas-vs-svg-performance/
[10] Источник: http://habrahabr.ru/post/172755/
Нажмите здесь для печати.