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

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

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

План доклада

Анимации

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

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

@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;
}

• Используйте только transform и opacity
• Задействуйте will-change
• Используйте pointer-events: none
• Не анимируйте все и сразу, используйте задержку
• Избегайте ресайза изображений
• Проверяйте мобильные браузеры

Оптимизируем

Спасибо

Links

http://csstriggers.com

http://jankfree.com

http://blog.gyrosco.pe

elforastero@ya.ru