Как влияет на отрисовку в браузере элемент с transform: translate()
?
То есть, как изменилась бы скорость отрисовки если бы я позиционировал элемент через top
, left
и т. д.; можно ли это как то измерить через devtools?
-
habrahabr.ru/post/163645– soledar1025 апр 2017 в 14:57
-
не совсем то, имелось ввиду не анимация а именно расположение– ruslik25 апр 2017 в 15:01
-
расположение при загрузке– ruslik25 апр 2017 в 15:02
1 ответ
Если вы будете сдвигать элемент при помощи top
, left
, right
, bottom
, то при каждом изменении на 1 пиксель блок будет перерисовываться заново — не тяжело догадаться, что это не лучшее решение с точки зрения производительности. Если же вы будете сдвигать элемент при помощи transform
, то для элемента будет использовано GPU-ускорение, для него будет создан отдельный слой, перерисовка блока при движении не будет происходить.
Для transform
возможно субпиксельное движение: при анимировании свойств top
, left
, right
, bottom
движение будет дискретным, а при использовании transform
— непрерывным.
Отследить разницу можно в devtools при помощи Paint Flashing, найти его можно так: http://prntscr.com/f0oaoh.
-
GPU если я не ошибаюсь включается когда идет 3d трансформация или используется will-change dev.opera.com/articles/ru/css-will-change-property - при 2d трансформациях никаких GPU-ускорение нет, однако элемент все равно плавнее двигается но вопрос был в другом. А не спрашиваю про анимацию, я спрашиваю про верстку Элемент я размещаю при помощи left и right или Элемент я размещаю при помощи transform translate При начальной отрисовке какой способ дает большую нагрузку– ruslik26 апр 2017 в 6:12
-
По поводу GPU-ускорения вы правы, этот момент я не описал детально, потому что сам всегда делаю через
translate3d()
. Если вам необходимо использовать смещение элемента один раз в самом начале, то разницы никакой нет — макет рассчитывается до рендера и не важно какие свойства использованы для смещения. 26 апр 2017 в 7:58 -
Если вам интересны все подробности рендера страницы и что влияет на этот процесс, то рекомендую вам ознакомиться с циклом Rendering performance developers.google.com/web/fundamentals/performance/rendering. 26 апр 2017 в 9:31