Блог

Мы тестировали CSS3 на iPhone (3G 4) и столкнулись с некоторыми проблемами производительности.

Мы получили веб-приложение, которое показывает изображение профиля дополнительную информацию.

У нас есть поле (по умолчанию мы скрываем поле на 90%):

 border: 1px solid #aaa;
font-size: 11px;
text-shadow: 0 1px 0 rgba(0,0,0,.75);
box-shadow: inset 0 0 40px rgba(255,255,255,.8);
-webkit-box-shadow: inset 0 0 40px rgba(255,255,255,.8);
-moz-box-shadow: inset 0 0 40px rgba(255,255,255,.8);
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
  

И у нас есть 3 иконки с надписью под ними:

 background: rgba(0,0,0,.5);
padding: 3px;
font-weight: bold;
text-shadow: 0 1px 0 #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
  

Теперь, если мы анимируем (перемещаем его в более высокую позицию Y) окно te, анимация получается действительно медленной, даже не плавной.

Что мы можем сделать, чтобы анимация была плавной?

PS. на iPhone 4S работает нормально (из-за лучшего процессора)

Редактировать: я дал этот ответ, предполагая, что вы анимируете переходы CSS3. Если это не так, а вы можете, то, возможно, стоит ожидать повышения производительности… Попробовать стоит.

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

Я столкнулся с зависшей прокруткой на своем устройстве Android (браузер на базе Webkit) и провел это тестирование, чтобы определить, в чем проблема. Текстовая тень была несколько неактуальной в настройках типа пользовательского интерфейса. Градиенты также были довольно несущественными. Как только я нажал box-shadow, я заметил почти линейный прогресс в производительности, поскольку я удалял радиус размытия пиксель за пикселем.

Например, для рендеринга большого div-файла радиусом 6 пикселей могло потребоваться 80 мс. Если бы я уменьшил это значение до 3 пикселей, время рендеринга было бы близко к 40 мс. 2 пикселя, около 20 мс.

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

Это может показаться очевидным. Поскольку нет опции для качества рендеринга (например), вы не можете оптимизировать это, кроме уменьшения масштаба… Для мобильных устройств все, что вы действительно можете сделать, это ограничить эффекты и оптимизировать свою художественную работу на основе ваших ограничений.