SVG-анимация Lottie: решение проблем с памятью

Интеграция анимации 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 для более эффективной и надежной реализации.