1

私たちは iPhone (3G + 4) で CSS3 をテストしてきましたが、いくつかのパフォーマンスの問題が発生しました。

プロフィール写真 + 追加情報を表示するWeb アプリケーションを取得しました。



ボックス があります(デフォルトではボックスを 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 位置に移動させる) と、アニメーションは非常に遅くなり、滑らかではありません。

アニメーションをスムーズにするにはどうすればよいでしょうか?

PS。iPhone 4S では (CPU が優れているため) うまく動作します。

4

1 に答える 1

2

編集：CSS3トランジションでアニメーション化していると仮定して、この回答を作成しました。そうでない場合でも、できる場合は、パフォーマンスの向上が期待できます...試してみる価値があります。

ここでの問題は、webkit が 2 つの非常に重いボックス シャドウを再描画する必要があることです。これは大した作業ではないように思えますが、最初にインセット ボックス シャドウを削除すると、パフォーマンスが驚くほど跳ね上がると思います。

Android デバイス (Webkit ベースのブラウザー) でボギー スクロールを経験したことがあり、このテストを行って問題の原因を特定しました。テキストの影は、UI タイプの設定ではあまり関係がありませんでした。グラデーションもかなり重要ではありませんでした。box-shadow をヒットすると、ピクセルごとにぼかし半径を削除するにつれて、パフォーマンスがほぼ線形に進行することに気付きました。

たとえば、6 ピクセルの半径は、大きな div でレンダリングするのに 80 ミリ秒かかる場合があります。それを 3px まで下げると、レンダリング時間は 40ms 近くになりました。2px、約20ms。

そのため、ボックス シャドウを控えて、可能であれば画像のみを使用することをお勧めします。それ以外の場合は、より小さな影を使用します。ローエンドのデバイスで webkit が 1 秒間に少なくとも 20 回 UI を再描画できるようになったら、おそらく問題ありません。

それは明白に思えるかもしれません。レンダリングの品質にはオプションがないため (たとえば)、縮小する以外にこれを最適化することはできません... モバイル デバイスの場合、実際にできることは、効果を抑えて、制限に基づいてアート作品を最適化することだけです。 .

于 2011-11-14T23:29:14.777 に答える