Почему transform: translate считается более производительным, чем изменение position: absolute?

Как браузер рендерит страницу

Браузер проходит несколько этапов: стилизация (style), расчёт геометрии (layout), отрисовка (paint) и композитинг (composite). Изменение position: absolute затрагивает layout — браузер пересчитывает положение элемента и всех его соседей. Это вызывает reflow (перерасчёт) и repaint (перерисовку), что нагружает CPU.

Почему transform быстрее

Transform: translate() не меняет геометрию элемента в потоке документа. Браузер помещает элемент на отдельный слой (слой композитинга) и передаёт его GPU. GPU просто сдвигает готовую текстуру, не пересчитывая layout и paint. Это называется композитинг-только анимация.

Пример кода

// Медленный вариант — вызывает reflow
.element {
  position: absolute;
  left: 100px;
  top: 50px;
  transition: left 0.3s;
}
.element:hover {
  left: 200px;
}

// Быстрый вариант — только композитинг
.element {
  transform: translate(100px, 50px);
  transition: transform 0.3s;
}
.element:hover {
  transform: translate(200px, 50px);
}

Когда это важно

Для анимаций, которые должны работать при 60 fps (например, параллакс, карусели, drag-and-drop). Для статического позиционирования разница незаметна. Используйте transform для движения, а position — для статической вёрстки.

Вывод: transform: translate() использует GPU-ускорение и избегает дорогих операций reflow/repaint, поэтому предпочтителен для плавных анимаций и интерфейсов с высокой частотой кадров.