Утечки памяти при работе с SVG
SVG анимация получила огромную популярность среди разработчиков. Простота создания, широкий функционал и сравнительно низкая ресурсоемкость делают эту технологию одной из самых перспективных в этом направлении.
Конечно же, эффективность SVG, как и любого другого решения зависит от рациональности кода и его организации. Довольно часто предложенные решения содержат несколько неудачных мест, которые вызывают утечки памяти и создают излишнюю нагрузку. Если вы не отслеживаете производительность вашего сайта, вы вряд ли заметите, что это происходит. Сегодня мы покажем вам, как вы можете проверить свой сайт, и рассмотрим несколько возможных причин утечки.
\"Heap Snapshot\"
Chrome имеет множество инструментов, которые помогут вам в процессе обнаружения утечек памяти. Самый простой способ сделать это - использование Heap Snapshot . Этот инструмент вы можете найти в инструментах разработчика на вкладке Profile : выберите пункт Take Heap Snapshot и нажмите кнопку Старт.
Для того чтобы определить, имеет ли место утечка памяти, вам нужно сделать несколько снимков и сравнить их размер. Если он постепенно увеличивается, как на картинке ниже, это значит, что где-то существует утечка:
После того, как мы получили несколько снимков и констатировали факт утечки, нам нужно использовать инструмент сравнения, чтобы определить ее причину. Просто кликните на последний снимок, чтобы открылось меню справа.
Кликните по треугольнику возле Summary и выберите пункт Compаrison, а затем выберите свой первый снимок из выпадающего списка справа от поля Class filter.
Полученные данные отсортируйте по столбцу #Delta . Теперь вы можете видеть разделы кода, в которых увеличивается расход памяти по убыванию. Пожалуйста, обратите внимание, что не все случаи роста потребления памяти можно назвать утечкой, иногда увеличение ее расхода просто необходимо.
Выберите верхнюю строку, и вы увидите объекты, которые вызывают расход памяти. В представленном нами примере основной причиной утечек стало нерациональное использование библиотеки snap.svg и простой алгоритм ее вызова.
Помогите Mark-and-Sweep
Очень часто особенности подхода к созданию анимации с помощью JavaScript приводят к тому, что Mark-and-Sweep не может найти все проблемные места. Алгоритм Mark-and-Sweep использует простой принцип: он пытается обработать объект, и если это невозможно, удаляет его.
Это означает, что если вы создаете синглтон для вызова библиотеки в цикле, но никогда не присваиваете ему значение NULL, удаление мусора не будет применяться к этому объекту, так как он по-прежнему доступен.
Это означает, что если вы создаете синглтон для вызова библиотеки в цикле, но никогда не присваиваете ему значение NULL, удаление мусора не будет применяться к этому объекту, так как он по-прежнему доступен.
Анализируйте инструменты
Используя готовые библиотеки, очень просто допустить значительные утечки. Используйте решения, которые имеют встроенные функции, предназначенные для сокращения расхода памяти. Например, Snap.SVG использует тот же метод, что и JQuery функция stop(). Она останавливает все анимации в очереди и запускает новую анимацию.
Обнуляйте таймеры
Таймеры одна из самых распространенных причин утечек памяти не только в анимации, но и веб-разработке в целом. Если вы не удалите ссылку на таймер, он будет постепенно съедать память, и так как он всегда будет доступен, он не будет удален сборщиком мусора.
Для большинства приложений это не проблема, так как обновление или переход на новую страницу приводят к удалению таймера. Тем не менее, современный веб полон одностраничных сайтов и приложений, для которых такой просчет становится настоящей проблемой.
Лучший способ очищать таймеры добавление их в массив, который обнуляется в нужный момент, как правило, перед началом новой анимации, или просто перед JS переходом.