60FPS. Ускоряем веб.

Евгений Джумак

Для чего нужны анимации в вебе
Разбираемся с терминами
Что происходит в браузере
Почему анимации тормозят
Исправляем частые ошибки
Профилирование в dev tools

План доклада

Для чего нужны анимации?

Пользовательский опыт

Конверсия

Необходимость

FPS

Частота обновления

16.6 мс

Анимации

JS

CSS

- transition

- animation

- libraries

- web animation

Почему анимации тормозят?

Вспоминаем процесс загрузки страницы

16.6

@keyframes moveAround {
  from {
    left: 0px;
  }
  to {
    left: 500px;
  }
}

@keyframes moveAround {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(500px);
  }
}

→

@keyframes fall-down {
  from {
    bottom: 0px;
  }
  to {
    bottom: -500px;
    display: none;
    width: 20px;
    height: 20px;
  }
}

@keyframes fall-down {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(500px);
    display: none;
    width: 20px;
    height: 20px;
  }
}

→

// Меняем размер через scale

@keyframes fall-down {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(500px)
               scale(.4);
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes fall-down {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(500px);
    display: none;
    width: 20px;
    height: 20px;
  }
}

→

.bender-spaceship {
  position: fixed;
  width: 240px;
  height: 300px;
  border-radius: 20%;
  background-image: url(bender-spaceship.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

// Избавляемся от ненужных вычислений

.bender-spaceship {
  position: fixed;
  width: 240px;
  height: 300px;
  border-radius: 20%;
  background-image: url(bender-spaceship.png);
  background-repeat: no-repeat;
}