Ящик-тень влияет на производительность шкалы

Question

Я использую свойство css transform:scale, чтобы масштабировать массив изображений и измерять производительность в fps.

Измерение производительности было очень медленным. Результат был всего 20 кадров в секунду. После прочтения некоторых советов о том, как повысить производительность. В основном они предложили не использовать box-shadow, так как он очень тяжелый и может замедлить работу. Итак, я установил box-shadow:none и снова измерил производительность. К сожалению, он дал те же результаты.

Из любопытства я установил box-shadow:1px 1px 1px black, чтобы проверить производительность. Мое ожидание производительности - это медленнее, потому что присутствует коробка-тень.

Но после измерения производительности он увеличился со скоростью 20 кадров в секунду - 50 кадров в секунду. Какие-нибудь идеи в этом причина? У меня нет идей.

Спасибо.

Answer 1

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

Читайте здесь некоторую хорошую информацию и идеи:

http://cubiq.org/performance-tricks-for-mobile-web-development

http://tobiasahlin.com/blog/how-to-animate-box-shadow/ (Как сделать бокс-тень с гладкой производительностью)

Также проверьте эту идею, используя изображения вместо медленных CSS-свойства (скриншот из первой ссылки - поиск «окно-тени»):

Надеюсь, некоторые из этих идей и информации помогут вам в работе.

Cheers.