Как уменьшить падение FPS при переходах javascript scroll / CSS - PullRequest
Новая
       127

Как уменьшить падение FPS при переходах javascript scroll / CSS

0 голосов
/ 13 июля 2020

Я попал в кроличью нору анализа и оптимизации производительности, и я не могу уменьшить падение частоты кадров в том, что должно быть довольно легким преобразованием, хотя я подозреваю, что он находится на прокрутке, хотя и ограничен возможно виноват? * версия ..

JS

w = $(window);
b = $('body');
c = $('#container');

$(document).ready(function() {

    w.scroll(function() {
        c.css('transform','translateY(' + -w.scrollTop() + 'px)');
    });

});

CSS

html, body { margin: 0; }

body {
    height: 500vh;
}

#container {
    display: block;
    position: fixed;
    height: 500vh;
    width: 100vw;
    background: #814e4e;
    padding: 20%;

    font-size: 30px;
    line-height: 45px;
    color: #fff;
    text-align: center;

    transform: translate3d(0,0,0);
    will-change: transform;
    transition: transform 1.5s ease-out;
}

HTML

<body>
  <div id="container">
      <p>Lorem ipsum...</p>
  </div>
</body>

I убрали функцию дроссельной заслонки из подчеркивания. js, а также переписали все это в GSAP, и во всех случаях, в той или иной степени, среднее падение FPS составляет 10-20. Удивительно, но версия с дросселированием jquery не была значительно улучшена по сравнению с обычной jquery для функции прокрутки, а версия GSAP, использующая их новый плагин триггера прокрутки, была намного менее плавной, чем любой из вышеперечисленных. Будем признательны за любые советы по этому или другим рекомендуемым подходам, которые я могу попробовать!

1 Ответ

1 голос
/ 14 июля 2020

.scrollTop вызывает перекомпоновку и не работает. Это ваша основная проблема.

Во-вторых, вы используете функцию .scroll, которая создает новую анимацию, влияющую на позицию прокрутки каждый тик, так что это тоже неэффективно.

В-третьих, вы применение перехода CSS, который пытается анимировать свойство каждый тик, так что это тоже не работает.

Если вы исправите все вышеперечисленное, вы все равно должны задросселировать событие прокрутки.

Гораздо больше незначительно, jQuery медленнее, чем vanilla JS.

Поскольку вы отметили это с помощью GSAP и сделали попытку с помощью ScrollTrigger, вот как вы можете сделать это с помощью ScrollTrigger . Это демо, которое я сделал ранее, но эффект тот же. эта часть страницы.

События прокрутки отклоняются. Обновления синхронизируются с обновлением экрана. Все вычисления прокрутки выполняются одним и тем же методом обновления. Естественное положение прокрутки страницы не изменяется. GSAP автоматически использует 3D-преобразования для использования рендеринга на GPU. Все предыдущие созданные анимации уничтожаются будущими анимациями. Нет конфликта между позиционированием, установленным JS и CSS попытками для одновременного оживления объектов.
...