Вопрос по performance, css3, css – Производительность CSS относительно translateZ (0)

89

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

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
Можете ли вы дать ссылку на эти статьи в блоге? Jürgen Paul
Btw,-o-transform: translateZ(0) никогда не было вещьюcaniuse.com/#search=translate3d Volker E.
@ Ахмед Нуаман, да, это не только уловка. Но это официально используется в некоторых приложениях. Но если вы окажетесь на устройстве (нижнем конце) без графического процессора ... Я не уверен, как оно работает. Но так как, если то, что может делать процессор (2D Graphics), делегировано GPU только по той причине, что есть 3D-команда, хотя она не оказывает окончательного воздействия. А 3D использует несколько ядер внутри и работает быстрее. Вот что здесь имеет смысл. Нужно еще расследование ... TooGeeky
@PineappleUndertheSea это:blog.teamtreehouse.com/… отправил меня сюда. user393219

Ваш Ответ

5   ответов
5

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

Еще лучше, используйте 3dtransitions transforms для создания анимации, подобной translateX (50px), а не слева: 50px;

Error: User Rate Limit Exceeded
14

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

С помощью-webkit-transform: translate3d(0,0,0); активирует GPU для переходов CSS, делая их более плавными (более высокий FPS).

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

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

93

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

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

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

25

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

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

Error: User Rate Limit Exceeded
7

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

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

Похожие вопросы