Аппаратное ускорение 2D-преобразований в Mobile Safari? - PullRequest
8 голосов
/ 22 марта 2012

Мне часто говорили, что CSS 3D-преобразования аппаратно ускоряются в Mobile Safari, что заставляет меня задуматься, не означает ли это, что 2D-преобразования нет?Я не могу придумать ни одной причины, по которой их не было бы, поскольку все они в основном могут быть реализованы в виде 3D-преобразований, но я хотел бы знать наверняка.

Если окажется, что 2D-преобразования не являются аппаратно ускореннымиЛюбое понимание того, почему будет высоко ценится.

1 Ответ

15 голосов
/ 06 апреля 2012

Вы правы, CSS 2D-преобразования не ускоряются аппаратно в Mobile Safari, но 3D-преобразования есть. Я не уверен, почему это так, но, возможно, они решили, что это было излишним для большинства 2D-преобразований. Излишнее использование графического процессора может отрицательно повлиять на срок службы батареи.

Очень легко преобразовать 2D-преобразование в 3D-преобразование, поэтому это не составляет большой проблемы. Одна хитрость заключается в использовании translateZ (0), как описано здесь: http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

EDIT

Apple ничего не говорит об этом в своей документации, поэтому трудно получить авторитетный источник. Вот что сказал по этому поводу Дин Джексон из Apple (от http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/):

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

Ария Хидаят из Sencha написала пост, объясняющий аппаратное ускорение в мобильных браузерах: http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/. Вот фрагмент из поста:

Наилучшая практика установки матрицы преобразования CSS для translate3d или scale3d (даже при том, что в ней не используется 3-D), обусловлена ​​тем фактом, что эти типы матриц переключат анимированный элемент на собственный слой, который затем составлены вместе с остальной частью веб-страницы и других слоев. Но вы должны заметить, что создание и составление слоев имеют свою цену, а именно распределение памяти. Не стоит слепо комбинировать каждый небольшой элемент веб-страницы ради аппаратного ускорения, вы съедите память.

Вот статья на html5rocks.com, в которой обсуждается аппаратное ускорение: http://www.html5rocks.com/en/tutorials/speed/html5/. Вот отрывок из него:

В настоящее время большинство браузеров используют ускорение графического процессора только тогда, когда они четко указывают на то, что элемент HTML выиграет от этого. Самый сильный признак - то, что трехмерное преобразование было применено к нему. Теперь вы, возможно, на самом деле не хотите применять 3D-преобразование, но все же получите преимущества от ускорения графического процессора - нет проблем. Просто примените преобразование идентичности:

-webkit-transform: translateZ (0);

Firefox и Internet Explorer уже используют аппаратное ускорение для 2D-преобразований, поэтому я не удивлюсь, если браузеры WebKit (Chrome, Safari) включат его в ближайшем будущем.

...