[Перевод] Почему перемещать элементы с помощью translate лучше, чем с position:absolute top/left23.12.2012 14:20

Для перемещения элемента по экрану есть два основных способа:

CSS 2D-преобразования и translate();
position:absolute и изменение top/left.

Крис Койер недавно писал, почему лучше и логичнее использовать translate (это быстрее, и свойство position имеет большее отношение к вёрстке, а не к визуальным эффектам и анимации, в отличие от translate).

Я хочу расширить его ответ и привести несколько хороших примеров. Я записал скринкаст, в котором помощью Chrome DevTools timline рассматриваю различия между этими подходами с точки зрения производительности, особенностей рендеринга и композитинга на GPU.

Если вам нужна сокращённая текстовая версия — продолжайте читать. Читать дальше →