Производительность CSS относительно translateZ (0)


96

В ряде блогов отмечается повышение производительности за счет «обмана» графического процессора, заставляющего думать, что элемент является трехмерным, с помощью transform: translateZ(0)ускорения анимации и переходов. Мне было интересно, есть ли последствия для использования этого преобразования следующим образом:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

6
вы можете дать ссылку на эти статьи в блоге?
Юрген Пауль

@PineappleUndertheSea вот этот: blog.teamtreehouse.com/… отправил мне сюда.

Кстати, -o-transform: translateZ(0)никогда не было. caniuse.com/#search=translate3d
Волкер Э.

@ Ахмед Нуаман: да, это не только уловка. Но официально он используется в каком-то приложении. Но если вы попадете на устройство (младшего поколения) без графического процессора ... Я не уверен, как оно работает. Но поскольку то, что может делать процессор (2D-графика), делегируется графическому процессору только по той причине, что есть команда 3D, хотя она не имеет окончательного влияния. А 3D использует внутри несколько ядер и работает быстрее. Вот что здесь имеет смысл. Требуется дополнительное расследование ...
TooGeeky

Ответы:


102

Преобразования CSS создают новый контекст наложения и содержащий блок, как описано в спецификации. Проще говоря, это означает, что элементы с фиксированным положением с примененным к ним преобразованием будут действовать больше как элементы с абсолютным позиционированием, и z-indexзначения, вероятно, будут запутаны.

Если вы посмотрите эту демонстрацию , вы поймете, что я имею в виду. Ко второму div применяется преобразование, то есть создается новый контекст наложения, а псевдоэлементы размещаются сверху, а не снизу.

В общем, не делайте этого. Применяйте трехмерное преобразование только тогда, когда вам нужна оптимизация. -webkit-font-smoothing: antialiased;- еще один способ задействовать 3D-ускорение, не создавая этих проблем, но он работает только в Safari.


28

Если вам нужны последствия, в некоторых сценариях производительность Google Chrome ужасна с включенным аппаратным ускорением . Как ни странно, изменение "трюка" на -webkit-transform: rotateZ(360deg);сработало нормально.

Я не думаю, что мы когда-либо понимали почему.


3
У меня были такие проблемы, как сжатые изображения и ужасно неправильная анимация с использованием максимальной высоты в Safari 5 и 6. Когда я отключил ускорение графического процессора (translateZ (0)), все работало, как задумано, но анимация не была достаточно плавной. Я изменил translateZ (0) на rotateZ (360deg), и внезапно анимация стала плавной, аппаратно ускоренной, и проблем больше не было.
jakub_jo

14

Он заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору (GPU) устройства, чтобы пиксели летали. С другой стороны, веб-приложения запускаются в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, что приводит к меньшим потребностям в переходах. Но Интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.

Использование -webkit-transform: translate3d(0,0,0);заставит графический процессор задействовать переходы CSS, делая их более плавными (более высокий FPS).

Примечание: translate3d(0,0,0) ничего не делает с точки зрения того, что вы видите. Он перемещает объект на 0 пикселей по осям x, y и z. Это всего лишь метод принудительного аппаратного ускорения.

Хорошо читайте здесь: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/


7

Я могу засвидетельствовать тот факт, что -webkit-transform: translate3d(0, 0, 0);возьму новую position: -webkit-sticky;собственность. С шаблоном навигации левого ящика, над которым я работал, аппаратное ускорение, которое я хотел с помощью свойства transform, мешало фиксированному позиционированию моей верхней панели навигации. Я отключил преобразование, и позиционирование работало нормально.

К счастью, у меня уже было аппаратное ускорение, потому что у меня был -webkit-font-smoothing: antialiasedэлемент html. Я тестировал это поведение на iOS7 и Android.


5

На мобильных устройствах отправка всего на графический процессор вызовет перегрузку памяти и приведет к сбою приложения. Я столкнулся с этим в приложении для iPad в Кордове. Лучше всего отправлять в графический процессор только необходимые элементы, которые вы специально перемещаете.

А еще лучше использовать 3d преобразования переходов для создания анимации, например translateX (50px), а не left: 50px;


1
Вы имели в виду «использовать трехмерные преобразования» вместо «использовать трехмерные переходы»?
Isius
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.