Включение аппаратного ускорения: translate3d

Question

Как Дэвид Уолш кратко discusses, возможно принудительное ускорение аппаратного обеспечения с использованием свойства translate3d на основе нуля в CSS.

Это работает так:

.animClass { 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 

    /* more specific animation properties here */ 
} 

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

Мои вопросы, то, являются:

1. выше метод улучшения ли выполнение переходов, таких как прозрачность, ширина и положение (слева, справа, сверху, снизу)? И должны вышеуказанные свойства.
2. Как кросс-браузер это? Меня не интересуют IE8 и ниже, но особенно мобильные устройства Android, iOS и Windows Phone должны извлечь из этого выгоду. Какой код следует добавить для большей совместимости?
3. Должен ли код включения оборудования быть добавлен к каждому элементу, у которого есть свойство transition? Если да, то есть ли способ сделать это простым микшером SASS, который можно легко использовать?

Answer 1

намек на третью часть:

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

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

Answer 2

1. Я могу сказать, что в целом (по моим собственным опытам) он улучшает скорость и производительность (особенно в веб-представлениях на Android и iOS), если использовать их разумно. Применение аппаратного ускорения ко всем элементам может быть контрпродуктивным, особенно на устройствах с меньшей памятью.

Я использую его при рендеринге изображений, и мне нужно повысить качество, чтобы изображения не размывались и заставляли устройства кэшировать все изображения. Android часто «разрезает изображения», когда его части находятся за пределами области просмотра. Но будьте осторожны, применение аппаратного ускорения при работе на Android на многих элементах может привести к сбою приложения. Те же правила применяются и к iOS (даже если iOS имеет лучшую производительность в веб-представлениях, поэтому вы «можете делать больше»).

2. Он работает в кросс-браузере, но должен быть префикс. На Android я использую его до 4.2.

3. Как я уже сказал, используйте его с умом. Примените его к классу, а затем установите класс только для определенных элементов, которые должны быть аппаратно ускорены. Если этого не требуется, удалите класс.

Так что используйте его только тогда, когда вам нужно, и только на элементах, которые нуждаются в нем в настоящий момент. Будьте осторожны, чтобы применить его к множеству элементов одновременно.Какой предел количества элементов трудно сказать. Но из-за памяти браузера он будет отличаться на рабочем столе/iOS/Android и т. Д.

Не анимируйте с позицией, а используйте перевод, что повысит производительность анимации (особенно на устройствах).

Я не устранило бы аппаратное ускорение на моем приложении, потому что тогда она будет выполнять намного хуже :)