Личный кабинет

Весь сайт Закрыть →

Утечки памяти при работе с SVG

2015
15 Мая

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

Конечно же, эффективность SVG, как и любого другого решения зависит от рациональности кода и его организации. Довольно часто предложенные решения содержат несколько неудачных мест, которые вызывают утечки памяти и создают излишнюю нагрузку. Если вы не отслеживаете производительность вашего сайта, вы вряд ли заметите, что это происходит. Сегодня мы покажем вам, как вы можете проверить свой сайт, и рассмотрим несколько возможных причин утечки.

«Heap Snapshot»

Chrome имеет множество инструментов, которые помогут вам в процессе обнаружения утечек памяти. Самый простой способ сделать это - использование Heap Snapshot . Этот инструмент вы можете найти в инструментах разработчика на вкладке Profile : выберите пункт Take Heap Snapshot и нажмите кнопку Старт.

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

1.png

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

2.png

Кликните по треугольнику возле Summary и выберите пункт Compаrison, а затем выберите свой первый снимок из выпадающего списка справа от поля Class filter.

3.png

Полученные данные отсортируйте по столбцу #Delta . Теперь вы можете видеть разделы кода, в которых увеличивается расход памяти по убыванию. Пожалуйста, обратите внимание, что не все случаи роста потребления памяти можно назвать утечкой, иногда увеличение ее расхода просто необходимо.

Выберите верхнюю строку, и вы увидите объекты, которые вызывают расход памяти. В представленном нами примере основной причиной утечек стало нерациональное использование библиотеки snap.svg и простой алгоритм ее вызова.

Помогите Mark-and-Sweep

Очень часто особенности подхода к созданию анимации с помощью JavaScript приводят к тому, что Mark-and-Sweep не может найти все проблемные места. Алгоритм Mark-and-Sweep использует простой принцип: он пытается обработать объект, и если это невозможно, удаляет его.

Это означает, что если вы создаете синглтон для вызова библиотеки в цикле, но никогда не присваиваете ему значение NULL, удаление мусора не будет применяться к этому объекту, так как он по-прежнему доступен.

Это означает, что если вы создаете синглтон для вызова библиотеки в цикле, но никогда не присваиваете ему значение NULL, удаление мусора не будет применяться к этому объекту, так как он по-прежнему доступен.

Анализируйте инструменты

Используя готовые библиотеки, очень просто допустить значительные утечки. Используйте решения, которые имеют встроенные функции, предназначенные для сокращения расхода памяти. Например, Snap.SVG использует тот же метод, что и JQuery функция stop(). Она останавливает все анимации в очереди и запускает новую анимацию.

Обнуляйте таймеры

Таймеры одна из самых распространенных причин утечек памяти не только в анимации, но и веб-разработке в целом. Если вы не удалите ссылку на таймер, он будет постепенно съедать память, и так как он всегда будет доступен, он не будет удален сборщиком мусора.

Для большинства приложений это не проблема, так как обновление или переход на новую страницу приводят к удалению таймера. Тем не менее, современный веб полон одностраничных сайтов и приложений, для которых такой просчет становится настоящей проблемой.

Лучший способ очищать таймеры добавление их в массив, который обнуляется в нужный момент, как правило, перед началом новой анимации, или просто перед JS переходом.

По материалам davidwalsh.name

Подписаться на обновления

Всем подписчикам книга «Хостинг от А до Я» в подарок!



Хотите знать

  • Как работает облачный хостинг?
  • Какие панели управления
    существуют, и в чем их различия?
  • Изучить основы хостинга VPS/VDS?

Ответы на эти и другие вопросы
вы найдете в нашей PDF книге

«Хостинг от А до Я»

Заполните форму
и получите книгу в подарок

Заполните форму и получите книгу в подарок

  • Мощные VPS
  • Аренда физических серверов
  • Регистрация доменов
  • Правильный хостинг
© 2003 — 2016 ООО «Е-Планет».
Контактная информация.

Регистрация займет не более минуты и позволит вам управлять всеми заказываемыми услугами E-Planet