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

82

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

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

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

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

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


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

Тимо
источник
9
Настоящий вопрос заключается в том, почему некоторые браузеры хотят, чтобы авторы прибегали к глупым приемам вроде «нулевого» преобразования для активации аппаратного ускорения. Firefox в максимально возможной степени полагается на графический процессор, в то время как IE выбирает УСКОРЕНИЕ ВСЕХ ВЕЩЕЙ! Но, тем не менее, интересный вопрос здесь, поскольку он, кажется, демонстрирует, что подобные взломы иногда могут даже иметь неприятные последствия.
BoltClock
2
@ BoltClock'saUnicorn В основном я с вами согласен. Но разве не всегда так было с кроссбраузерностью? :-)
Timo
6
Я задал этот вопрос довольно давно, но теперь заметил, что количество перемещенных элементов, похоже, имеет большое влияние на проблему. Перемещение нескольких больших объектов более производительно, чем перемещение большого количества мелких предметов при использовании 3D-ускорения, потому что все слои с 3D-ускорением должны быть переданы в GPU и обратно. Таким образом, даже если графический процессор выполняет свою работу хорошо, передача многих объектов может быть проблемой, поэтому использование ускорения графического процессора может не окупаться.
Timo
1
Я не вижу разницы в производительности в этом примере ни в одном браузере и проголосовал за закрытие, как не воспроизводимый.
Jason C
1
@Timo Только что проверил, какие бывают последние версии Firefox и Chrome, и IE11, на 64-битной Windows 7, на довольно старом Thinkpad 2.3 ГГц i5 с nVidia 4200M, оба варианта мне кажутся удобными. пожимают плечами
Jason C

Ответы:

100

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

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

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

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

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

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

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

backface-visibility: hidden;
perspective: 1000;
mddw
источник
3
Я сделал еще один тест. В основном то же самое, что и тест №1, но на этот раз я позволил ящикам также вращаться вокруг оси z через -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html - На этот раз версия с аппаратным ускорением работает быстрее! Если я уберу вращение, аппаратное ускорение замедлит анимацию. Если ваша теория верна, то это не должно работать (потому что единственная разница в том, что я добавил rotateZ(360)). С другой стороны, может быть, хром достаточно умен, чтобы понять, что для вращения вокруг оси Z не требуется перерисовка обратной стороны этих плиток?
Timo
1
В iOS6 этого больше нет :-(
Майкл Маллани
2
@Timo Предупреждаем, w3schools не связаны с w3c: w3fools.com
Кайл Робинсон Янг,
7
вы должны добавить, где добавить эти строки, а не просто «просто добавьте это ...» я сам знаю где, но многие не стали бы.
vsync
4
Добавьте его к родительскому элементу, который вы анимируете.
mddw
7

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

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

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

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

Дэн Даскалеску
источник
6

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

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

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

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

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

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

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

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

ов
источник
2
Что ж, тогда зацените это. Я сделал еще один тест. В основном то же самое, что и тест №1, но на этот раз я дополнительно позволил ящикам вращаться вокруг своей оси, добавив -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html - на этот раз версия с аппаратным ускорением работает быстрее! Если я уберу вращение, аппаратное ускорение замедлит анимацию.
Timo
@valmar: вы включаете счетчик кадров в секунду? В этом новом примере я вижу это независимо от того, как я установил флажок, означающий, что аппаратное ускорение по-прежнему принудительно. Я думаю , ваш вопрос сводится к тому, «почему translateZ(0)медленнее , чем rotateZ(360deg)»
OV
Вообще-то, нет. translateZ(0)ВСЕГДА активен. На самом деле это необходимо для запуска 3D-ускорения. rotateZ(360deg)просто дополнительно добавляет анимацию вращения. Поэтому я бы сказал, что вопрос: почему анимация с аппаратным ускорением 3D более плавная, rotateZ(360deg)чем без?
Timo
1
не могу в это поверить. Вращение тяжелых изображений происходит быстрее без аппаратного ускорения ...
ProblemsOfSumit
0

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

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

Лев
источник
Я не могу найти эту опцию в chrome: // flags здесь. Если вы отключите эту функцию, будет ли для вас версия с аппаратным ускорением быстрее, чем версия без ускорения?
Timo
Теперь эта опция есть в настройках DevTools
Дмитрий Пашкевич
0

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

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

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

сабоф
источник
Скорее всего, проблема в реализации. Графические процессоры намного быстрее для любой графики, если вы все правильно реализуете;)
scientiaesthete
1
translateZ(0)на самом деле ничего не делает, кроме "активации" аппаратного ускорения 3D. Это взлом, но он работает. При добавлении этого атрибута css выбранный элемент html, а также все дочерние элементы будут вычисляться с помощью графического процессора, а не процессора.
Timo
Я не знаю всех деталей низкоуровневой реализации. У меня были аналогичные проблемы с QT - аппаратное ускорение замедляло работу. Я не знаю, в какой момент (и осознает ли) компьютер, что translateZ (0) можно игнорировать, а преобразование может обрабатываться как движение в 2 измерениях. (Без перспективы, без сглаживания, без z + = 0 для каждого пикселя)
Sabof
scientiaesthete, GPU не быстрее выполняет математические вычисления для всей графики, так как CPU требует усилий для перемещения команд и памяти в GPU и GPU-память. Это предел сложности, чтобы эти усилия окупились. YMMV <предварительная сборка ручного оптимизатора здесь;)
tomByrer
Графические процессоры намного быстрее в реальной вычислительной части. Однако все доступные в настоящее время графические процессоры проходят довольно сложную фазу настройки, прежде чем могут начаться фактические вычисления. Для «простого» контента, позволяя ЦП выполнять всю визуализацию, может быть быстрее, чем настройка GPU + вычисления GPU. Хорошо реализованный браузер автоматически сделает правильный выбор, и любой автор случайного контента не сможет сделать лучше.
Mikko Rantalainen
-2

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

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

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

一丝 冰凉
источник
Добро пожаловать в Stack Overflow! Пожалуйста, не используйте подписи / слоганы в своих сообщениях. Ваш ящик пользователя считается вашей подписью, и вы можете использовать свой профиль для публикации любой информации о себе, которая вам нравится. FAQ по подписям / слоганам
Эндрю Барбер
3
Я уже объяснил почему, а также упомянул почему в разделе часто задаваемых вопросов, на который я ссылался. У вас уже есть подпись - посмотрите вправо, там ваше имя и аватар.
Эндрю Барбер
, 你 «淫» 了。 不过 还是 很 感谢 , 还 不太 熟悉 «stackoverflow» 的 规则。
冰凉
1
Добро пожаловать. Также обратите внимание, что это веб-сайт только на английском языке. :) Ваше имя подходит, но ваши сообщения должны быть сделаны на английском языке, пожалуйста.
Эндрю Барбер
3
苦 逼 了, я не говорю по-английски, прости меня, пожалуйста.
一丝 冰凉