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

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

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

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

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

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

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

77
css css-transitions css3 hardware-acceleration

6 ответов

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

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

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

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

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

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

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

backface-visibility: hidden;
perspective: 1000;
94

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

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

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

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

7

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

GPU композитинг на всех страницах использует GPU-ускоренную композицию на всех страницы, а не только те, которые включают GPU-ускоренные слои.

GPU ускоренного рисования включить GPU ускоренного рисования страницы содержимое при включении компоновки.

GPU ускоренный холст 2D обеспечивает более высокую производительность тегов canvas с 2D-контекстом путем рендеринга с использованием графического процессора (GPU) аппаратура.

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

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

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

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

6

Проверьте chrome: / / флаги в chrome. Тут написано

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

0

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

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

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

0

Я видел Вас двух демо， я думаю, я знаю, почему вы путаете：

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

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

-2