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

Я переезжаю 6000 небольших элементы DIV в эксперименте с использованием CSS3 перехода от top: 0к top: 145pxк тесту производительности.

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

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

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

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

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

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

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

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

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

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

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

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

backface-visibility: hidden;
perspective: 1000;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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