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

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

Пишу скрипт постраничной прокрутки для сайта . Сначала написала постраничную прокрутку с анимацией, всё было норм, но потом стала внедрять на реальный сайт и тут начались лаги. Особенно там где есть ещё css анимация по мимо самого слайдера ( к примеру плавное появление блоков на слайде 2 и 3 ). Нашла другой сайт где такая же прокрутка и лагов ни каких, в то время как у меня просто ужас. Я даже с чистого css перешла на GSAP анимацию. Эфетка ноль. На сайте который норм используется GSAP. В чём их секрет сложно сказать по коду так как там 17тыс. строк кода.
Подскажите что Я сделала такого чтобы получить такие лаги и что сделали они чтобы их не получить.
PS конечно на сильных компах лагов Вы не заметите, но вот на ноутах или слабых машинках они будут точно (причину этого примерно понимаю, как избежать не знаю)
  • Вопрос задан
  • 1811 просмотров
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать проект Площадки для дизайнеров интерьеров
22 нояб. 2024, в 10:19
10000 руб./за проект
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Ещё заказы