translate3d против производительности перевода

Теперь мы все знаем, особенно из эта хорошая статья о том, что мы должны предпочесть css-преобразования анимации позиции.

Но у нас есть выбор между translate() и translate3d()...

Какой из них обычно быстрее?


performance css-transforms
person abernier    schedule 01.03.2014    source источник
comment
после моего теста в хроме. я обнаружил, что translateX работает быстрее, чем translate3d, но я озадачен введите здесь описание изображения введите здесь описание изображения   -  person Nic_Xu    schedule 30.05.2019

Ответы (3)


arrow_upward
49
arrow_downward

На этом сайте ниже проводятся тесты, сравнивающие translate(), translate3d() и пару других свойств. Согласно ему, translate3d() работает быстрее в большинстве браузеров.

http://jsperf.com/translate3d-vs-xy

person Cameron Little    schedule 10.03.2014
comment
Этот тест является поддельным, этот вопрос касается производительности рендеринга, которая вообще не тестировалась в этом jsperf. - person Niko Sams; 30.03.2015
comment
@abernier нет, это нельзя сравнивать с jsperf. Для сравнения вы можете использовать временную шкалу инструментов chrome dev. - person Niko Sams; 14.03.2016
comment
Хотелось бы получить некоторые текущие, точные данные о производительности RENDERING, так как я все еще не понимаю реальной разницы между 2D и 3D переводами и является ли преобразование анимации в 3D из 2D просто микрооптимизацией. Всем статьям и ресурсам, которые я нахожу, 3 и 4+ года. - person Brett84c; 09.06.2017
comment
В моем случае перевод выполняется быстрее. не перевести3d - person slideshowp2; 21.09.2017
comment
Этот тест является поддельным, потому что каждая отдельная версия Chrome дает совершенно разные результаты. Этому вообще нельзя доверять. Гораздо лучшим тестом было бы просто позволить мне ПОСМОТРЕТЬ анимацию, нет? - person Simon_Weaver; 26.02.2019

arrow_upward
35
arrow_downward

Использование translate3d подталкивает анимацию CSS к аппаратному ускорению. Даже если вы хотите сделать базовый 2D-перевод, используйте translate3d для большей мощности! Так что «T3d» просто лучше, потому что он говорит CSS-анимациям продвигать анимацию в 3D! Вот почему это быстрее. (Ответ Кэмерона Литтла является доказательством)

person AFCA_Timon    schedule 11.03.2014
comment
Что, если я хочу просто перевести вертикально? Я бы использовал для этого translateY(). Но как добиться вертикального перевода только с помощью translate3d? - person Limpuls; 09.12.2019
comment
@Limpuls прежде всего: вы должны задать свой вопрос. Во-вторых: просто установите значение y для translate3d перевести на вертикальную ось. transform: translate3d(0, 42px, 0); - person Florian; 11.12.2019

arrow_upward
17
arrow_downward

Как предположил Кэмерон, translate3d должно быть быстрее во многих браузерах, в основном в тех, которые используют аппаратное ускорение gfx для ускорения рендеринга. особенно в webkit translate3d был предпочтительным способом принудительного аппаратного ускорения элементов страницы.

хотя по опыту MIT иногда есть один недостаток в использовании 3D-преобразований - в определенных комбинациях браузер-версия/ОС (osx+safari, я смотрю на вас) аппаратно-ускоренный рендеринг может немного изменить сглаживание шрифта, а также интерполяцию, вызывая незначительное мерцание или размытие. эти ситуации в основном можно обойти, но их следует иметь в виду.

person roman    schedule 11.03.2014
comment
Соглашаться. Это часто встречается в моем случае. Хром на Mac. - person AlbertSamuel; 29.11.2017