大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

背景

平時(shí)我們?cè)诖蛴螒虻臅r(shí)候，都會(huì)接觸到 幀數(shù) 這個(gè)名詞，也就是 fsp，幀數(shù)越高，說明畫面的顯示更加流暢

圖片

剛好最近公司的某個(gè)項(xiàng)目，需要實(shí)時(shí)展示網(wǎng)頁的幀數(shù)，所以也涉及到了如何去計(jì)算幀數(shù)這個(gè)問題

如何計(jì)算？

什么是幀數(shù)呢？就是一秒內(nèi)有多少幀，所以想要計(jì)算幀數(shù)的話，我們需要算出一秒內(nèi)有多少幀

想要算幀，大家可以想一下用哪個(gè) API 跟幀有關(guān)系的？

是的，那就是 requestAnimationFrame，每跑完一次requestAnimationFrame，就說明跑完一幀了，所以我們只需要計(jì)算出：一秒內(nèi)跑了多少次 requestAnimationFrame 就行~

use-fsp

下面是一個(gè)初級(jí)的版本，可以實(shí)時(shí)計(jì)算出幀數(shù)

圖片

可以看看頁面上的效果

圖片

可以看到變的非常的快，這也對(duì)于用戶體驗(yàn)不太好，所以我們需要優(yōu)化一下

圖片

間隔優(yōu)化

現(xiàn)狀是每過一幀就實(shí)時(shí)計(jì)算一下，我們可以優(yōu)化一下，隔幾幀再計(jì)算一次幀數(shù)，這樣就不會(huì)更新得太頻繁了~

圖片

現(xiàn)在就比較穩(wěn)定了，沒那么頻繁了~

圖片