Улучшение производительности перехода CSS3

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

В flash actionscript имеется удобное свойство cacheAsBitmap, которое преобразует анимирующий элемент в растровое изображение до начала анимации. Это находка и значительно ускоряет некоторые виды анимации. Есть ли что-то подобное для CSS? Существуют ли какие-либо другие советы для повышения производительности без упрощения дизайна страницы? Я думаю, что такие вещи, как включение аппаратного ускорения или выделение анимации в качестве приоритета для браузера.

Ответ 1

До директивы will-change вы не могли бы сделать это одним и тем же способом, который вы можете использовать на других языках. Браузер (или, по крайней мере, Webkit) имел дело с отображением страницы путем рисования различных слоев. Теоретически он должен быть достаточно интеллектуальным, чтобы выработать слои для вас, но иногда было хорошей идеей заставить что-то в свой собственный слой.

Иногда это сработало, иногда это не так, в зависимости от того, что происходит.

В любом случае.

В CSS один способ заставить что-то в слое - преобразовать его с помощью 3D-преобразования. Общая стратегия состоит в том, чтобы добавить либо:

transform: translateZ(0);

или эквивалент:

transform: translate3d(0,0,0);

или немного сумасшедший:

transform: rotateZ(360deg);

или перевод в сочетании с:

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

если вещи мелькают.

Они создают новый слой, как это определяет спецификация. Из http://www.w3.org/TR/css3-transforms/#transform-property,

"Любое значение, отличное от" none "для преобразования, приводит к созданию как контекста стекирования, так и содержащего блока."

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

Удачи!

Ответ 2

Chrome 36
Firefox 38
Opera 30
Android-браузер 40
Chrome для Android 42

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

.drawer {
    will-change: transform;
}

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

Для получения дополнительной информации вы можете прочитать полную статью этой цитаты.

Ответ 3

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

Ответ 4

К сожалению, это ограничено рядом вещей, многие из которых вы не можете контролировать:

Производительность браузера - все браузеры ведут себя по-разному с CSS3 и Javascript. Я нашел Safari одним из лучших (удивительно?) С точки зрения производительности CSS3, с Chrome во втором и Firefox в третьем.
Производительность графического процессора. Некоторые браузеры теперь выгружают анимацию и операции перехода на GPU, и в этом случае скорость/производительность ограничены графическим процессором. Если вы используете интегрированный графический процессор Intel, он вряд ли будет очень плавным по сравнению с дискретной графической картой NVIDIA или AMD.
Производительность процессора. В ситуациях, когда браузеры НЕ выгружаются на GPU, используется процессор, в этом случае ваш процессор становится узким местом.
Количество открытых вкладок/окон - многие браузеры обмениваются процессами между вкладками, а другие анимации или процессоры, выполняемые в других вкладках/браузерах, могут создавать деградации производительности.

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