Мне часто говорили, что 3D-преобразования CSS аппаратно ускоряются в Mobile Safari, что заставляет меня задаться вопросом, не означает ли это, что 2D-преобразования таковыми не являются? Я не могу придумать причин, по которым их не было бы, поскольку в основном все они могут быть реализованы как 3D-преобразования, но я хотел бы знать наверняка.
Если выяснится, что 2D-преобразования не ускоряются аппаратно, любое понимание того, почему это происходит, будет высоко оценено.
Вы правы, 2D-преобразования CSS не ускоряются аппаратно в Mobile Safari, но 3D-преобразования ускоряются. Я не уверен, почему это так, но, возможно, они решили, что это излишество для большинства 2D-преобразований. Использование графического процессора без необходимости может отрицательно сказаться на сроке службы батареи.
Преобразовать 2D-преобразование в 3D-преобразование очень просто, так что это не проблема. Один из приемов — использовать translateZ(0), как описано здесь: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/
ИЗМЕНИТЬ
Apple ничего не говорит об этом в своей документации, поэтому получить авторитетный источник сложно. Вот что сказал по этому поводу Дин Джексон из Apple (из http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/):
По сути, любое преобразование, одной из функций которого является 3D-операция, запускает аппаратную композицию, даже если фактическое преобразование является 2D, или вообще ничего не делает (например, translate3d(0,0,0)). Обратите внимание, что это просто текущее поведение, которое может измениться в будущем (поэтому мы не документируем и не поощряем его). Но это очень полезно в некоторых ситуациях и может значительно повысить производительность перерисовки.
Ария Хидаят из Sencha написала пост, объясняющий аппаратное ускорение в мобильных браузерах: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/. Вот фрагмент из поста:
Наилучшая практика установки матрицы преобразования CSS на translate3d или scale3d (даже если не задействовано 3D) исходит из того факта, что эти типы матриц будут переключать анимированный элемент, чтобы иметь свой собственный слой, который затем будет компоноваться вместе с остальная часть веб-страницы и другие слои. Но вы должны отметить, что создание и наложение слоев имеют свою цену, а именно выделение памяти. Неразумно слепо компоновать каждый мельчайший элемент веб-страницы ради аппаратного ускорения, вы съедите память.
Вот статья с сайта html5rocks.com, в которой обсуждается аппаратное ускорение: http://www.html5rocks.com/en/tutorials/speed/html5/. Вот фрагмент из него:
В настоящее время большинство браузеров используют ускорение графического процессора только тогда, когда у них есть четкое указание на то, что HTML-элемент выиграет от этого. Самым убедительным признаком является то, что к нему было применено 3D-преобразование. Теперь вы, возможно, не захотите применять 3D-преобразование, но все же получите преимущества от ускорения графического процессора — без проблем. Просто примените преобразование идентичности:
-webkit-transform: translateZ(0);
Firefox и Internet Explorer уже используют аппаратное ускорение для 2D-преобразований, поэтому я не удивлюсь, если браузеры WebKit (Chrome, Safari) включат его в ближайшем будущем.
