0

Всем привет!

Попался сложный макет, с кучей графики и крутилок вертелок. Вообщем тесты на на маке показали плачевный результат в виде дерганья скрола(только на маке), и проседание фпс. Покурил форумы нашел проблему с бекграундом фиксированным, исправил ее, но сайт не стал прокручиваться легче. Помогите советом куда копать, впервые сталкивааюсь с тем, что браузер не может прокрутить сайт.

вот пациент - тут

2

1 ответ 1

0

Явный перебор анимаций и эффектов. Даже на iMac Core i7 / 64GB RAM ужасно лагает. Дело не только в методах, а и в переборе анимированных элементов и их количестве. Браузер не успевает даже на таком железе нормально обрабатывать обрисовку.

По fixed background, вы правильно заметили. Как минимум это тоже влияет на FPS. А также смотрите в сторону видео + JS/CSS анимаций.

Что больше всего есть CPU?

  • Видео на фоне
  • Паралакс эффекты
  • Цикличные CSS анимации по типу box-shadow/text-shadow
  • При скроллинге сайта сразу же подгружаются элементы, которые также анимируются, без каких либо задержек
5
  • то есть выход только в том чтобы отключить анимацию? тут столько же анимации но крутится вполне себе нормально ссылка, может есть способы компромисса?
    – DexColt
    25 июл 2018 в 14:45
  • На примере, что вы дали, явно нет столько анимаций. Там нет ни видео на фоне, ни постоянных свечений (описал выше про css text-shadow animation), ни паралакс эффектов, ни постоянных линейных эффектов по бокам (как у вас). Там только при скроллинге 1 анимация считайте. Анимация появления. У вас же, если грубо, то где-то в 4-5 раза больше. 25 июл 2018 в 14:47
  • даже не знаю что делать, по сути нужно как то оптимизировать, так как анимация часть тз
    – DexColt
    25 июл 2018 в 14:53
  • Попытаться обяснить клиенту, что все это конечно круто, но это явный перебор. И люди любят clean design и минимум сложностей. Такая нагрузка не только на CPU, но и на человека влияет и просто хочеться уйти побыстрее, что сказать там об "информации" :) 25 июл 2018 в 14:55
  • спасибо за советы! я конечно предполагал что проблема в этом, но думал мало ли есть волшебная кнопка, которая устраняет тормоза, как например, я на одном проекте заменил анимацию по позиции на трансформ по позиции - прирост колоссальный
    – DexColt
    25 июл 2018 в 15:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.