SVG-анимация Lottie: решение проблем с памятью
![](/static/storage/107547656823564026468740817617145568923.png)
Интеграция анимации Lottie SVG может значительно повысить визуальную привлекательность веб-сайта. Однако иногда этот процесс может вызывать проблемы с производительностью, особенно из-за чрезмерного использования памяти.
В этом посте подробно описан мой опыт интеграции анимации Lottie с использованием пакета vue3-lottie
в приложение Vue 3 и последующие проблемы, с которыми я столкнулся. Я также опишу решение, которое решило эти проблемы, обеспечив более плавную работу и лучшее управление ресурсами.
Проблема
При включении в пакет vue3-lottie
нескольких анимаций SVG, я заметил серьезное снижение производительности. Использование системной памяти резко возрастет, в результате чего сайт замедлится и перестанет отвечать на запросы.
Подробные наблюдения
- Скачок памяти: включение автозапуска и бесконечного цикла с
vue3-lottie
компонентом привело к резкому увеличению использования памяти браузером с 700 МБ до 3000 МБ. - Подозрения на утечку памяти: даже после попытки управлять жизненным циклом компонентов путем их надлежащего уничтожения использование памяти оставалось чрезмерно высоким, что указывает на потенциальную утечку памяти.
- Непоследовательная переработка памяти: механизм повторного использования памяти браузера не смог эффективно управлять использованием памяти, поддерживая его на высоком уровне даже после остановки анимации.
Результаты расследования
После тщательного расследования я обнаружил, что основная причина кроется в самом пакете vue3-lottie
. В частности, использование пакета для рендеринга SVG с включенными циклами и автозапуском приводило к постоянному росту потребления памяти, что в конечном итоге приводило к снижению производительности.
Анализ использования памяти
- Начальная загрузка — использование памяти начинается примерно с 200 МБ.
- Через 10–30 секунд — использование памяти увеличивается до 700–1800 МБ.
- Переработка памяти — неэффективна, сохраняется около 600 МБ даже после срабатывания.
Решение
Решением было перейти от использования пакета vue3-lottie
к прямому импорту скрипта проигрывателя Lottie. Такой подход значительно сократил объем памяти и стабилизировал производительность.
Этапы реализации
- Прекратите использование vue3-lottie: прекратите использование
vue3-lottie
иlottie-web
из-за связанных с ними проблем с управлением памятью. - Импорт сценария Lottie Player: вы можете импортировать онлайн и загрузить его с Lottie player js, а также использовать тег сценария для импорта
lottie-player.js
из LottieFiles.
Пример кода
Старая реализация с пакетом vue3-lottie
:
<template>
<vue3-lottie
:options="defaultOptions"
:height="400"
:width="400"
autoplay
loop
/>
</template>
<script setup>
import { reactive } from 'vue';
import vue3Lottie from 'vue3-lottie';
import animationData from '@/assets/animation.json';
const defaultOptions = reactive({
animationData,
});
</script>
Новая реализация с импортом lottie-player.js
:
<template>
<lottie-player
ref="heroLottie"
:src="lottieHeroSectionData"
speed="1"
direction="1"
mode="normal"
loop
autoplay/>
</template>
<script setup>
import {lottieHeroSectionData} from "@frontendApp/views/agent/landing/pages/homepage/lottie";
import {onBeforeMount} from "vue";
import "@frontendApp/views/agent/landing/assets/js/lottie-player.js"
const heroLottie = ref(null);
onBeforeMount(() => {
if (heroLottie.value) {
heroLottie.value.destroy()
}
})
</script>
Наблюдаемые преимущества
- Уменьшение начального использования памяти: около 100 МБ после загрузки страницы.
- Эффективная переработка памяти: после перезагрузки использование памяти стабилизировалось на уровне примерно 200–400 МБ.
- Устранение лагов: сайт стал отзывчивым и стабильным, исчезли лаги и сбои
Заключение
Включение анимации Lottie SVG может значительно улучшить взаимодействие с пользователем, но крайне важно отслеживать и управлять последствиями для производительности. Переход от пакета vue3-lottie
к прямому импорту сценария проигрывателя Lottie оказался эффективным решением для устранения утечек памяти и проблем с производительностью. Такой подход обеспечивает более плавную анимацию и более отзывчивый веб-сайт, экономя время и ресурсы. Если вы столкнулись с подобными проблемами, рассмотрите возможность использования сценария проигрывателя Lottie для более эффективной и надежной реализации.