Продуктивність CSS щодо translateZ (0)

Ряд блогів висловив приріст продуктивності в "обманюванні" графічного процесора, думаючи, що елемент є тривимірним, використовуючи його transform: translateZ(0)для пришвидшення анімації та переходів. Мені було цікаво, чи є наслідки для використання цього перетворення наступним чином:

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

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

Якщо ви поглянете на цю демонстрацію , то зрозумієте, що я маю на увазі. До другого div застосовується трансформація, що означає, що він створює новий контекст стекування, а псевдоелементи розміщуються зверху, а не знизу.

Отже, в основному, не робіть цього. Застосовуйте 3D-перетворення лише тоді, коли вам потрібна оптимізація. -webkit-font-smoothing: antialiased;це ще один спосіб скористатися 3D-прискоренням, не створюючи цих проблем, але він працює лише в Safari.

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

Я не вірю, що ми колись з’ясовували, чому.

Це змушує браузер використовувати апаратне прискорення для доступу до блоку графічної обробки пристрою (GPU), щоб змусити пікселі літати. З іншого боку, веб-програми працюють у контексті браузера, що дозволяє програмному забезпеченню робити більшість (якщо не все) рендеринга, що призводить до меншої потужності для переходів. Але Інтернет наздоганяє, і зараз більшість постачальників браузерів забезпечують графічне апаратне прискорення за допомогою певних правил CSS.

Використання -webkit-transform: translate3d(0,0,0);призведе GPU до дії для переходів CSS, роблячи їх більш плавними (вищий FPS).

Примітка: translate3d(0,0,0) нічого не робить з точки зору того, що ви бачите. Він переміщує об'єкт на 0px по осях x, y та z. Це лише техніка, щоб змусити апаратне прискорення.

Добре читати тут: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

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

На щастя, здається, у мене вже було апаратне прискорення, бо у мене був -webkit-font-smoothing: antialiasedелемент html. Я тестував цю поведінку в iOS7 та Android.

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

А ще краще, використовуйте переходи переходів 3d, щоб робити анімації, такі як translateX (50px), на відміну від лівої: 50px;