閱讀Chrome Frame Rate結果DevTools

Question

就我所知，白色（空白）欄代表空閒時間。 我知道我應該專注，使應用程序將運行（最好）>的60fps和至少> 30fps的

這是我的吧：

正如你所看到的，我重畫上滾動（改變圖像的背景位置）。 在這種情況下，中線標記爲60fps，如果您密切關注，則會出現頂線（即30fps）。

我將我的結果與其他人的結果進行了比較，似乎我的空閒時間相當長。可以嗎 ？我知道繪畫，JavaScript和其他任何東西都不好，但顯示空閒時間的目的是什麼？我應該試圖擺脫它，如果是的話，我應該注意什麼？

此外，由於「圖像解碼」，偶爾會出現一個尖峯，有什麼我可以做的嗎？

Answer 1

圖像進行解碼

可以縮小圖像，這將使得解碼更短的大小。您也可以讓瀏覽器儘早進行這些解碼，也許在沒有活動的時候進行，因此不會損害您的FPS。

我也會暫時殺死這些大圖像，看看是否會將您從30fps移動到60fps。

滾動處理

你應該儘量減少工作量你做你的滾動處理。最多你應該從DOM中抓取一個滾動度量標準和一個時間戳。然後做您的調整風格在​​循環：http://www.hesslerdesign.com/blog/javascript/optimizing-javascript-performance-handling-coordinate-updates/

重漆

background-position以及WebKit中或閃爍未優化，尤其是對於這種用例的。我會將圖像放入div中，並使用transform: translate(x,y)（並將其儘可能地提升到自己的層次）滑動其位置。如果成功，您將不會重新繪製每個卷軸上的整個屏幕。

30 FPS不壞

實30FPS實際上看起來比東西是60和45的所有時間之間跳躍更好。好奇......你是在加那利還是在視網膜屏幕上？

---

一般來說，你在硬件上的表現相當不錯，但我會盡量減少這些圖像解碼。如果你願意，你可以進一步與上述。