如何用 FPS 衡量 web 頁面效能？

侯鐵2016-06-27 23:09:00

不懂前端開發，不過瀏覽器這麼處理不是很合理麼？滑動的時候畫的頻繁點50多幀為了看起來流暢，一個頁面上的動畫畫20多幀也足夠了（瀏覽器是這麼認為的我感覺很合理，如果是個純靜態頁面，幀率應該更低如果瀏覽器足夠聰明），普通的程式介面不怎麼動的幀率都很低，比如我常開著vs程式設計，vs的幀率就是個位數。事實上玩命畫可以畫上千幀，費電發熱風扇噪音大，沒幾天顯示卡就燒壞了。

Jasin Yip2016-06-27 23:16:40

頁面不是遊戲，不需要每秒鐘都實時渲染，它只需要在需要的時候渲染，比如你滾動的時候。如果你是靜止的話，FPS很低是正常的。

魯小夫2016-06-27 23:19:26

頁面沒有任何變化的時候， 不需要 chrome 去重繪，這個 fps 就會降到 0 了。

如果你開啟 continuous repainting ，chrome 會去不斷重繪頁面，那麼 fps 又開始活動了。但此時效能消耗會高於使用者正常的網頁瀏覽，僅用於排查效能瓶頸。

卌弎廿一2016-06-28 19:22:56

首先那個玩意兒叫html5

Roc.L2016-06-28 21:36:14

fps主要用來衡量動畫的效能，具體到頁面那就是頁面動畫的效能，而不是整個頁面的效能。圖片滑動是動畫，頁面滾動本質上也是動畫。當頁面靜止並無其他動畫用fps去衡量是不恰當的。

簡單說，頁面效能應從白屏時間、首屏時間、dns、http、fps等等去綜合衡量，fps主要用於動畫效能衡量。