Как исправить производительность анимации?

Question

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

Такие дела.

Есть код анимации:

if ( $('.landing__superdesign').length ) {
        let f = $('.landing__superdesign-f');
        let s = $('.landing__superdesign-s');
        let t = $('.landing__superdesign-t');

        let parallax = () => {
            let scrollTop = $('.wrap').scrollTop();
            f.css('transform', 'translateY(' + scrollTop/10 + 'px)');
            s.css('transform', 'translateY(' + -scrollTop/10 + 'px)');
            t.css('transform', 'rotate(' + (45 + scrollTop/10) + 'deg)');
            window.requestAnimationFrame(parallax);
        };
        window.requestAnimationFrame(parallax);
    }

три элемента, два движутся по вертикали, один крутится вокруг своей оси (элементы - простые фигуры: два прямоугольника и линия)

Но вот как только я начинаю скроллить страницу, макбук врубает кулеры, греется и страница слегка подлагивает.
Помимо этой анимации есть еще почти такая же только для фоновой картинки - она движется по горизонтали с помощью backgriund-position. Без анимированных фигур страница не фризит, с фигурами уже начинается боль.

Что не так и как облегчить анимацию?

Comments

[Kovalsky]

Думаю достаточно будет убрать лишние операции из parallax, например вместо траверса в поисках .wrap сохранить его в переменную. Также можно избавиться от сложных функций типа $.fn.css, и либо обойтись без $, либо использовать что-нибудь попроще, типа $.fn.attr. Будет полегче, но мне кажется стоит потестить в чем именно проблема, например уменьшить сначала количество анимируемых фигур, посмотреть на производительность.

Answer 1

[twobomb]

А зачем 60 раз в секунду крутить эту функцию? Нельзя повесить на какое нибудь событие скролла или т.п.? Параметры то вроде бы не изменяются.
Типа такого

Comments

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

да, так баче, спасибо)
я бы так и сделал, если б пару недель назад не попробовал requestAnimation и не увидел насколько он облегчает анимацию, но тут что-то не задалось)

[Kovalsky]

Денис Букреев, озвученное вполне можно реализовать и с помощью requestAnimationFrame, я в прошлом вопросе про анимацию уже рассказывал как это делается, даже код прислал. Другое дело, что если ваш алгоритм не оптимален, то страница все равно будет тормозить, только не постоянно, а только во время скролла. Или хотите сказать что не тормозит?

[twobomb]

Денис Букреев, requestAnimation это конечно хорошо, но нужно понимать где это правильно применять. Другое дело если бы там эти объекты постоянно крутились и летали по сайту, а если параметры не меняются сами по себе, ничего не просчитывается, то и не стоит использовать данный метод.