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

    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".
    Ответ написан