使用GPU加速優化渲染Webkit

Question

我開發了一個小型應用程序來測試CSS3和translate3d。這個想法是渲染幾個在屏幕上隨機移動的DIV。這是一種粒子系統，我知道我可以使用WebGL或Canvas來獲得更好的性能，但我也希望它能夠在移動瀏覽器上順利運行，因此我認爲DOM操作對於性能會更好。

你會在這個url

我想達到最佳的性能，增加的DIV的號碼找到了幾個小時後的結果。

但是，這是我的問題，我有一個「渲染問題」，當我在Chrome或Safari上使用TimeLine時發現。整個頁面不時會在Safari iPhone或Chrome Android + iPhone上產生一個可感知的小滯後。

所以，如果你們中的一個人面臨挑戰，不要猶豫，我嘗試了很多事情，但我沒有弄清楚如何避免這種昂貴的重繪。

順便說一句，如果你有一個人有額外的想法來優化這個片段不要猶豫，回覆。

由於

---------- UPDATE 1 ----------

基於Ariya建議我通過代碼（url）更新和補充另一個測試只使用頂部/左側。 基於Chrome提供的FPS計數器，我可以看到使用幾乎相同幀速率的頂部/左側屬性，fps更穩定。 如果我可以優化CSS3版本來獲得更好的性能，你有什麼想法嗎？我雖然與GPU加速css3會更快我可能做錯了。

----------更新2 ----------

我更新了我的代碼，使用requestAnimFrame，只有當我需要重新繪製火了。 我發現什麼是殺死我在css中定義的perf grey漸變背景經常重繪並導致性能下降。 然而，頂部/左側似乎仍然比CSS過渡更好:(從純粹的性能角度來看）

Answer 1

在Google Chrome的開發人員工具中查看時間軸配置文件時，顯然有很多樣式重新計算。在這個特定的行被指責：

 lastSheet.insertRule('@-webkit-keyframes '+keyframeName+' { .... 

換句話說，連續地改變樣式表是昂貴由於在此示例中的元素的動畫是關於周圍移動它們，而不是使用基於關鍵幀的動畫我。將建議簡化爲簡單的轉換。