CSS3 Translate3D и аппаратное ускорение iPhone

Question

В Интернете есть несколько ссылок об использовании директивы CSS3 translate3d для принудительного аппаратного ускорения на некоторых мобильных устройствах (iPhone и т. Д.).Однако, хотя большинство из них подробно описывают translate3d, ни одно из найденных мной объяснений не объясняет, как именно его использовать.Поэтому я брожу, если я правильно его реализовал, так как мои анимации все еще немного запинаются.Мои вопросы:

1: применяете ли вы его к элементу (который создается динамически), который собираетесь анимировать (слайды и т. Д.), Или просто применяете его глобально, например, к элементу body?

2: лучше ли применять правила стиля к элементу программно, когда элемент создается динамически, или лучше создать правило css (например, класс) и применить правило к элементу?(Существует ли какая-либо форма предварительной компиляции или повышение производительности?)

3: Есть ли какие-то другие приемы, которые я могу использовать, чтобы получить плавный и плавный пользовательский опыт?Или быстрые победы или запутанные обходные пути?

Спасибо

Answer 1

-webkit-transform: translate3d (0, 0, 0);

Если вы примените это свойство css к любым элементам, оно заставит устройство использовать аппаратное ускорение. Я применил его для решения проблем рендеринга на Ipad2, таких как "пробелы"

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

http://davidwalsh.name/translate3d

Answer 2

1) Честно говоря, понятия не имею: P Я бы пошел за применение переходов только к элементу.

2) Менять классы быстрее, чем применять правила стиля.Источник: http://www.quirksmode.org/dom/classchange.html Кроме того, вы разделяете стиль и поведение.Последние версии Desktop Opera ведут себя так же, как и другие браузеры.Я понятия не имею о мобильных браузерах.

3) Для технической оптимизации проверьте yslow и pagepeed аддоны Firefox.Здесь собрана большая часть рекомендаций: http://developer.yahoo.com/performance/rules.html