Почему включение аппаратного ускорения в CSS3 снижает производительность?

Question

Я перемещаю 6000 маленьких элементов div в эксперименте css3, используя переход от top: 0 в top: 145px проверить производительность.

Без использования аппаратного ускорения работает гладко на Google Chrome.

Если я включу аппаратное ускорение через translateZ(0) производительность становится ужасной.

Почему это так?

Вот мой пример кода: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

---

Обновление(2014-11-13): Поскольку этот вопрос по-прежнему привлекает внимание, я хотел бы отметить, что сама проблема, кажется, все еще существует, хотя упомянутое заикание может не быть больше видно в предоставленной демонстрациина современном оборудовании. Старые устройства могут по-прежнему сталкиваться с проблемами производительности.

Answer 1

Я всегда добавляю:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

При работе с 3d преобразованием. Даже "поддельные" 3D-трансформации. Опыт подсказывает мне, что эти две линии всегда улучшают производительность, особенно на iPad, но также и на Chrome.

Я сделал тест на вашем примере, и, насколько я могу судить, это работает.

Что касается части "почему" вашего вопроса... я не знаю. 3D-трансформация - это молодой стандарт, поэтому реализация нестабильна. Вот почему это свойство с префиксом: для бета-тестирования. Кто-то может заполнить отчет об ошибке или вопрос и попросить команду провести расследование.

Редактировать за 19 августа 2013 г.:

У этого ответа есть регулярная активность, и я просто потерял час, обнаружив, что IE10 также нуждается в этом. Так что не забывайте:

backface-visibility: hidden;
perspective: 1000;

Answer 2

Анимация причины была медленнее, когда вы добавили хак с нулевым преобразованием (translateZ(0)), что каждое нулевое 3D-преобразование создает новый слой. Когда этих слоев слишком много, производительность рендеринга снижается, поскольку браузеру необходимо отправить много текстур в графический процессор.

Проблема была замечена в 2013 году на домашней странице Apple, которая злоупотребляла взломом нулевого преобразования. Смотрите http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

ОП также правильно заметил объяснение в своем комментарии:

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

Answer 3

Интересно. Я пытался играть с несколькими вариантами в about:flagsа именно эти:

Компоновка с помощью графического процессора на всех страницах Использует ускорение с помощью графического процессора на всех страницах, а не только на тех, которые содержат слои с графическим ускорением.

Графическое ускорение рисования Включите графическое ускорение рисования содержимого страницы, когда включена компоновка.

GPU Accelerated Canvas 2D Обеспечивает более высокую производительность тегов холста с 2D-контекстом путем рендеринга с использованием аппаратного обеспечения графического процессора.

Включил те, попробовал и с треском провалился с включенной галочкой (как и вы). Но потом я заметил еще один вариант:

Счетчик FPS Показывает фактическую частоту кадров страницы в кадрах в секунду, когда активно аппаратное ускорение.

Учитывая выделение в описании флага, я бы предположил, что аппаратное ускорение было для меня фактически даже без установленного флажка, так как я видел счетчик FPS с включенными выше параметрами!

TL; DR: аппаратное ускорение, в конце концов, предпочтение пользователя; заставляя его с помощью манекена translateZ(0) представит избыточные издержки обработки, создающие видимость более низкой производительности.

Answer 4

Проверьте chrome:// флаги в chrome. Это говорит

"Когда включена многопотоковая компоновка, ускоренные CSS-анимации запускаются в потоке композитинга. Однако может быть выигрыш в производительности при работе с ускоренными CSS-анимациями даже без потока компоновщика".

Answer 5

Мой опыт заключается в том, что графические процессоры обычно не быстрее для всех видов графики. Для очень "базовой" графики они могут быть медленнее.

Возможно, вы получили бы другой результат, если бы вы поворачивали изображение - вот в чем хороши графические процессоры

Также учтите, что translateZ(0) - это операция в 3-х измерениях, в то время как изменение верхнего или левого - это 2-мерная операция.

Answer 6

Я видел вас два демо. Думаю, я знаю причину, по которой вы запутались:

1. Элементы анимации Не используйте левую или верхнюю часть для изменения местоположения, попробуйте использовать -webkit-transform;
2. Все дочерние элементы должны включать аппаратное ускорение, например, использовать translateZ () или translate3D;
3. FPS измеряет беглость анимации, ваш демо FPS в среднем всего 20FPS.

Выше только личное мнение, спасибо!