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

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

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

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

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

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

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

6 77
css css3 css-transitions hardware-acceleration

6 ответов:

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

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

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

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

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

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

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

backface-visibility: hidden;
perspective: 1000;
94

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

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

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

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

7

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

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

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

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

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

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

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

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

6

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

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

0

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

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

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

0

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

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

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

-2