• Как убрать тормоза в прорисовке блоков с большими картинками в chrome?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Пятиминутка оптимизации:
    1) У вас нигде не включена 3д акселерация. Необходимо использовать либо will-change, либо translateZ(). Проще наверное will-change.
    а) Добавьте will-change: width, left; для .side
    б) Добавьте will-change: transform, width, opacity; для .img
    Вот так выглядит таймлайн у меня без твиков:
    pq5WvkG.png
    А вот так выглядит с моими твиками
    rAxTkFy.png
    Как видите до твиков средний фпс был около 30-40 и иногда стабильно проваливался до 20, что в общем то хреново. После твиков 50-60 с джанками на js/layout. Их я уже оптимизировать тут не буду, мне лень :)
    2) У вас .side изменяет свойство left, это весьма затратная херня. Постарайтесь переписать с использованием translateX. Это даст буст по производительности
    3) Изменение width для фуллскрин элементов это жутко затратное действие, так что ничего удивительного что без твиков у вас все тормозило.

    UPDATE: таймлайны приведены из хрома, если это кого интересует. В изначальном виде сайт одинаково ужасно тормозил на chrome/ff. При этом в ie11 все смотрелось весьма неплохо :) Конкретно сказать почему все именно так - не в состоянии, ибо уже сто лет не делал анимацию без акселерации. Обычно всегда побеждает хром, ибо в нем все работает и анимируется плавно, потом идет фф, где почти все работает, но зачастую идет проседание по производительности, и замыкает тройку ослик11, в котором зачастую много-чего не пашет (но при этом то что пашет, работает быстрее чем в фф).
    Ответ написан
    1 комментарий