モバイルデバイスでのCSS3のパフォーマンス

Question

私たちはiPhone3D（3G + 4）でCSS3をテストしており、パフォーマンスの問題が発生しました。

私たちはWebappのプロフィール画像+追加情報を持っています。

我々は ボックス（私たちは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; 

を

ここで、私たちがアニメーション化すると（ハイgherのYの位置）のボックス、アニメーションは本当に遅く、滑らかではありません。

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

PS。あなたがCSS3トランジションを使ってアニメーション化していると仮定して、この回答をしました。これは、iPhone 4Sが（CPUが優れているため）いいえ終了します。

Answer 1

あなたがいなくても、あなたができるなら、あなたは改善されたパフォーマンスを期待することができます...それは価値があるショットです。

ここでの問題は、Webkitが本当に重い2つのボックスシャドウを再描画しなければならないということです。これは大きな仕事のようには見えませんが、最初にinset box-shadowを削除した場合、驚くべきパフォーマンスの飛躍が見えると思います。

私はアンドロイドデバイス（Webkitベースのブラウザ）でうごめくスクロールを経験し、このテストを実行して問題の原因を特定しました。テキストの影は、UIの種類の設定とは関係がありませんでした。グラジエントもかなり重要ではありませんでした。一度私がボックスシャドウを打つと、ぼかし半径をピクセルごとに取り除いたので、パフォーマンスがほぼ線形に進行していることに気付きました。

たとえば、6pxの半径は大きなdivにレンダリングするのに80msかかることがあります。私が3pxに落とした場合、レンダリング時間は40msに近くなりました。 2px、約20ms。

したがって、ボックスシャドウを保持し、可能であれば画像を使用したい場合は、小さいシャドウを使用します。 Webkitがローエンドのデバイスで1秒間に少なくとも20回UIを再描画できるポイントに達すると、おそらく大丈夫です。

明らかかもしれません。レンダリングの品質（例えば）のためのオプションはないので、実際にこれをスケールバックすることを超えて最適化することはできません。モバイルデバイスの場合、実際に行うことができるのは、効果を抑え、あなたの制限に基づいてアートワークを最適化することだけです。