移動設備上的CSS3性能

我們一直在使用iPhone（3G + 4）上的CSS3進行測試，並且出現了一些性能問題。移動設備上的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;

現在，如果我們有動畫（讓它移動到喜g Y position position te te）te box the the the the animation re，，，，

我們可以做些什麼來使動畫流暢？

PS。在iPhone 4S是運行退出不錯（因爲更好的CPU）

來源

2011-11-14 StijnH

你好嗎動畫？ JavaScript的？ css3動畫？ dom轉換？ –

我們首先嚐試使用Javascript，之後我們嘗試使用CSS3動畫。隨着CSS3我們得到了更好的表現，但仍然不夠流暢...... – StijnH

編輯：我做了這個答案，假設你用CSS3過渡動畫。如果你不是，而且你可以，你可能期望提高性能......這是值得一試的。

這裏的問題似乎是webkit必須重新繪製兩個非常重的箱子陰影。這看起來並不是什麼大事，但如果你先去掉了插入框陰影，我想你會看到令人驚訝的性能跳躍。

我已經在我的android設備（基於Webkit的瀏覽器）上經歷了boggy滾動，並進行了測試以確定問題所在。文字陰影在UI類型設置中有些不相關。漸變也相當不重要。一旦我點擊了box-shadow，我注意到了一個幾乎線性的漸進效果，因爲我逐個像素地移除了模糊半徑。

例如，6px半徑可能需要80ms才能在大div上呈現。如果我把它降低到3px，渲染時間接近40ms。 2px，大約20ms。

所以你可能想要阻止盒子陰影，如果可能的話只使用圖像，否則只是使用較小的陰影。一旦您達到webkit可以在低端設備上至少重繪20次UI的時間，那麼您可能就沒有問題了。

看起來很明顯。由於沒有選擇渲染質量的選項（例如），所以除了縮小範圍之外，您無法真正優化這個功能......對於移動設備，您真正可以做的就是根據您的限制阻止效果並優化您的藝術作品。

來源

2011-11-14 23:29:14

Thx爲答案！我在Google上找到的是，如果您要添加-webkit-transform：translate3d（0，0，0）;這對你的元素來說，你會獲得更好的表現。但是這對於絕對定位的元素不適用... – StijnH

這應該啓用GPU加速，這與動畫可以獲得的效率大致相同。我一直在找webkit加載非直觀的性能......功能？它做了一些奇怪的事情來優化，但在某些情況下，它會比應該的慢得多。主要是重新繪製用戶界面的方式讓我很困惑。如果我遇到任何問題，我已經收到了這個問題。如果你有進步，我會很有興趣聽到！ –

奇怪的是：如果我們在iPhone 4上測試這個，那麼在3G上動畫不那麼流暢......保持張貼！ – StijnH

移動設備上的CSS3性能

回答

相關問題