Задать вопрос
Libris
@Libris
javascript

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

Пишу скрипт постраничной прокрутки для сайта . Сначала написала постраничную прокрутку с анимацией, всё было норм, но потом стала внедрять на реальный сайт и тут начались лаги. Особенно там где есть ещё css анимация по мимо самого слайдера ( к примеру плавное появление блоков на слайде 2 и 3 ). Нашла другой сайт где такая же прокрутка и лагов ни каких, в то время как у меня просто ужас. Я даже с чистого css перешла на GSAP анимацию. Эфетка ноль. На сайте который норм используется GSAP. В чём их секрет сложно сказать по коду так как там 17тыс. строк кода.
Подскажите что Я сделала такого чтобы получить такие лаги и что сделали они чтобы их не получить.
PS конечно на сильных компах лагов Вы не заметите, но вот на ноутах или слабых машинках они будут точно (причину этого примерно понимаю, как избежать не знаю)
  • Вопрос задан
  • 1757 просмотров
Комментировать
Подписаться 7 Оценить Комментировать
Решения вопроса 2
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Так как я уже убитый после рабочего дня и войны с кастомными скроллбарами, то полного ревью по веб-перфу дать не смогу. Но по мелочам пробежаться могу.
1) Вот так выглядит таймлайн сайта, после полного скролла вниз, а затем вверх (смотреть на верхний график).
YjaRo9S.png
Если в кратце, то все печально :) На всех переходах фпс стабильно падает до 30 (и иногда ниже). Ваша цель - 60 фпс в среднем, и не ниже 40 на паре-тройке фреймов при переходах.
Если вы чайник в замерах веб-перформанса с помощью таймлайна (и дев тулс вообще), то вам сюда:
а) https://developers.google.com/web/fundamentals/per... - святой грааль.
б) https://www.udacity.com/course/browser-rendering-o... - по сути дела дополнение к текстовому варианту, но только в виде отличных видео и мини-тестами. Там же на udacity есть похожил курс от Григорика.
в) Искать другие годные статьи в дайджестах и блогах, пилить/изучать демки и все такое.
2) Очень беглый осмотр показал, что у некоторых элементов анимация происходит с помощью изменения таких свойств как left например (вылезающий и жутко тормозящий блок справа на 3 странице). В 90% случаев для анимации движения/перемещения/отображения прилично использовать только transform/opacity, особенно когда речь идет о больших элементах. С анимацией всяких left/top/width и подобных вещей для больших элементов можете вообще забыть о 60фпс.
3) Основную ставку вам надо будет делать на создание отдельных слоев для элементов, проще говоря юзать translateZ/backface-visibility. Но только юзать это надо с умом, и каждый раз все профилировать через таймлайн. В веб-перфе есть одна крылая фраза "Tools, not rules".
Ответ написан
13 комментариев
13 комментариев
abaddon65
@abaddon65
Ну на сайте который вы привели в пример используется метод requestAnimationFrame для запланирования перерисовки, что в итоге позволяет браузеру заранее произвести расчет для следующего кадра анимации, что в итоге дает большую плавность. Проблема только в том, что данный метод есть только в IE10+. Так что для нормальной поддержки пользовался этим кодом:
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

В свое время именно это помогло мне избавиться от тормазов при анимации.
Ответ написан
22 комментария
22 комментария
Пригласить эксперта
Ответы на вопрос 2
@doubledare
В css анимации можна добавить "фичу" 0-евого translatez
blog.teamtreehouse.com/create-smoother-animations-...
тут в Conclusion
kristerkari.github.io/adventures-in-webkit-land/bl...
тут просто основные советы
Ответ написан
Комментировать
Комментировать
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Chrome 42
40679d278d564ffe9d4c546cfab72dd0.png
Не вижу разницы в плавности.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать программы на Python с алгоритмами из биоинформатики
02 мая 2024, в 19:24
3000 руб./за проект
Логотип для компании B2B, B2G поставка оборудования
02 мая 2024, в 19:16
5000 руб./за проект
Обучение модели нейронной сети процессу примерки одежды
02 мая 2024, в 19:14
25000 руб./за проект
Ещё заказы