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

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

Использование no аппаратного ускорения выполняется в Google Chrome.

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

backface-visibility: hidden;
perspective: 1000;

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

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

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

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

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

Ответ 4

Проверьте хром://флаги в хроме. В нем говорится:

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

Ответ 5

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

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

Также рассмотрим, что translateZ (0) - операция в 3 измерениях, а смена верхней или левой - двумерная операция

Ответ 6

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

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

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