大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~1Ib28資訊網——每日最新資訊28at.com

背景

平時我們在打游戲的時候，都會接觸到 幀數 這個名詞，也就是 fsp，幀數越高，說明畫面的顯示更加流暢1Ib28資訊網——每日最新資訊28at.com

圖片1Ib28資訊網——每日最新資訊28at.com

剛好最近公司的某個項目，需要實時展示網頁的幀數，所以也涉及到了如何去計算幀數這個問題1Ib28資訊網——每日最新資訊28at.com

如何計算？

什么是幀數呢？就是一秒內有多少幀，所以想要計算幀數的話，我們需要算出一秒內有多少幀1Ib28資訊網——每日最新資訊28at.com

想要算幀，大家可以想一下用哪個 API 跟幀有關系的？1Ib28資訊網——每日最新資訊28at.com

是的，那就是 requestAnimationFrame，每跑完一次requestAnimationFrame，就說明跑完一幀了，所以我們只需要計算出：一秒內跑了多少次 requestAnimationFrame 就行~1Ib28資訊網——每日最新資訊28at.com

use-fsp

下面是一個初級的版本，可以實時計算出幀數1Ib28資訊網——每日最新資訊28at.com

圖片1Ib28資訊網——每日最新資訊28at.com

可以看看頁面上的效果1Ib28資訊網——每日最新資訊28at.com

圖片1Ib28資訊網——每日最新資訊28at.com

可以看到變的非常的快，這也對于用戶體驗不太好，所以我們需要優化一下1Ib28資訊網——每日最新資訊28at.com

圖片1Ib28資訊網——每日最新資訊28at.com

間隔優化

現狀是每過一幀就實時計算一下，我們可以優化一下，隔幾幀再計算一次幀數，這樣就不會更新得太頻繁了~1Ib28資訊網——每日最新資訊28at.com

圖片1Ib28資訊網——每日最新資訊28at.com

現在就比較穩定了，沒那么頻繁了~1Ib28資訊網——每日最新資訊28at.com

圖片 1Ib28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-67846-0.html寫一個 Vue3 Hooks，準確計算網頁的幀數 FPS

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 2024年的Rust與Go，你看明白了嗎？

下一篇： 都 2024 年了，該如何搭建新的 React 項目？