Что в этом коде такого, что браузер заставляет перегреваться процессор?

Question

[Денис Букреев]

Такие дела.
Использую библиотеку Snap для управлением SVG.

Имею такой код:

circle () {
        let it = this;

        // Создаем circle
        let circle = it.snap.circle(it.marginRight(), 90, 0);

        // Стили
        circle.attr({
            r: 2,
            fill: "rgba(135,205,45,0)",
            stroke: "#5da858",
            strokeWidth: 3
        });

        // Анимация радиуса и ширины border
        circle.animate({
            r: 800,
            strokeWidth: 10,
            opacity: 0.8
        }, 5000, mina.linear);

        // Анимация прозрачности
        setTimeout(() => {
            circle.animate({
                opacity: 0,
                strokeWidth: 1
            }, 1000, mina.linear);
        }, 4000);

        // Удаляем circle
        setTimeout(() => {
            circle.remove();
        }, 5100)
    }

Это метод класса. Я его вызываю по setInterval() каждую секунду, таким образом получаю расширяющиеся кольца, имитирующие волны.
И именно этот скрипт грузит весь сайт до лагов и перегрева макбука (кулер начинает работать через несколько секунд после открытия сайта, а разряжаться бук начинает со скоростью 1% в минуту).
Убрав этот скрипт я получил стабильный быстрый сайт.

Что здесь такого? Может где-то утечка памяти?

Answer 1

[Ernest Faizullin]

видимо вложенные таймауты в анимации прозрачности

Answer 2

[Виталий]

что-то мне говорит, что это беда circle.animate который уже задает тайм интервалы и оборачивается в интервалы, а дальше все наростает действиями.

Comments

[Денис Букреев]

как быть?
анимация не сильно сложная, а в итоге нагрузка, будто игру запустил с толстыми требованиями

Answer 3

[Dark Hole]

1. SVG - это "тяжелая" вещь
2. Готов предположить, что анимация не "приделывается" к requestAnimationFrame, вследствии чего получается двойная перерисовка DOM + пункт 1.
3. Системник - это вам не процессор :)

Comments

[Денис Букреев]

и как же тогда анимировать столь простой эффект?
5-10 расширяющихся circle - что может быть проще для рендеринга?