Я изучаю визуализацию в браузере, чтобы понять процесс рендеринга и цикл обработки событий. Я всегда думал, что translate3d быстрее при рендеринге с помощью нового графического процессора.
Сегодня я тестирую Chrome Watch на вкладке Performance. найдите ниже:
translate3d используется 105 мс
translateX только 49 мс
@keyframes move {
100% {
transform: translateX(300px);
}
}
@keyframes move3d {
100% {
transform: translate3d(300px, 0, 0);
}
}