Я переезжаю 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;
источник
-webkit-transform: rotateZ(360deg);
dl.dropbox.com/u/17844821/zeug/hwtest2.html - На этот раз версия с аппаратным ускорением работает быстрее! Если я уберу вращение, аппаратное ускорение замедлит анимацию. Если ваша теория верна, то это не должно работать (потому что единственная разница в том, что я добавилrotateZ(360)
). С другой стороны, может быть, хром достаточно умен, чтобы понять, что для вращения вокруг оси Z не требуется перерисовка обратной стороны этих плиток?Причина, по которой анимация была медленнее, когда вы добавили хак нулевого преобразования (
translateZ(0)
) заключается в том, что каждое нулевое 3D-преобразование создает новый слой. Когда этих слоев слишком много, производительность рендеринга снижается, потому что браузеру необходимо отправлять много текстур на графический процессор.Проблема была замечена в 2013 году на домашней странице Apple, которая злоупотребляла взломом нулевого преобразования. См. Http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/
ОП также правильно заметил объяснение в своем комментарии :
источник
Интересно. Я пробовал играть с несколькими вариантами, в
about:flags
частности с этими:Включил их, попробовал и с треском провалился с включенным флажком (как и вы). Но тут я заметил еще один вариант:
Учитывая выделение в описании флага, я бы предположил, что на самом деле аппаратное ускорение было включено для меня даже без отмеченного флажка, поскольку я видел счетчик FPS с включенными опциями выше!
TL; DR: аппаратное ускорение, в конце концов, является предпочтением пользователя; принуждение к нему с помощью пустышки
translateZ(0)
приведет к избыточным накладным расходам обработки, что приведет к снижению производительности.источник
-webkit-transform: rotateZ(360deg);
dl.dropbox.com/u/17844821/zeug/hwtest2.html - на этот раз версия с аппаратным ускорением работает быстрее! Если я уберу вращение, аппаратное ускорение замедлит анимацию.translateZ(0)
медленнее , чемrotateZ(360deg)
»translateZ(0)
ВСЕГДА активен. На самом деле это необходимо для запуска 3D-ускорения.rotateZ(360deg)
просто дополнительно добавляет анимацию вращения. Поэтому я бы сказал, что вопрос: почему анимация с аппаратным ускорением 3D более плавная,rotateZ(360deg)
чем без?Проверьте флаги chrome: // в chrome. Это говорит
источник
Мой опыт показывает, что графические процессоры обычно не быстрее для всех видов графики. Для очень «базовой» графики они могут быть медленнее.
Если бы вы вращали изображение, вы могли бы получить другой результат - в этом хорошо разбираются графические процессоры.
Также учтите, что translateZ (0) - это операция в трех измерениях, а изменение верхнего или левого угла - это двухмерная операция.
источник
translateZ(0)
на самом деле ничего не делает, кроме "активации" аппаратного ускорения 3D. Это взлом, но он работает. При добавлении этого атрибута css выбранный элемент html, а также все дочерние элементы будут вычисляться с помощью графического процессора, а не процессора.Я видел вас двоих демо Думаю, я знаю причину, по которой вы запутались :
Выше только личное мнение, спасибо!
источник