大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~jLM28資訊網(wǎng)——每日最新資訊28at.com

背景

平時(shí)我們在打游戲的時(shí)候，都會(huì)接觸到 幀數(shù) 這個(gè)名詞，也就是 fsp，幀數(shù)越高，說明畫面的顯示更加流暢jLM28資訊網(wǎng)——每日最新資訊28at.com

圖片jLM28資訊網(wǎng)——每日最新資訊28at.com

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

如何計(jì)算？

什么是幀數(shù)呢？就是一秒內(nèi)有多少幀，所以想要計(jì)算幀數(shù)的話，我們需要算出一秒內(nèi)有多少幀jLM28資訊網(wǎng)——每日最新資訊28at.com

想要算幀，大家可以想一下用哪個(gè) API 跟幀有關(guān)系的？jLM28資訊網(wǎng)——每日最新資訊28at.com

是的，那就是 requestAnimationFrame，每跑完一次requestAnimationFrame，就說明跑完一幀了，所以我們只需要計(jì)算出：一秒內(nèi)跑了多少次 requestAnimationFrame 就行~jLM28資訊網(wǎng)——每日最新資訊28at.com

use-fsp

下面是一個(gè)初級的版本，可以實(shí)時(shí)計(jì)算出幀數(shù)jLM28資訊網(wǎng)——每日最新資訊28at.com

圖片jLM28資訊網(wǎng)——每日最新資訊28at.com

可以看看頁面上的效果jLM28資訊網(wǎng)——每日最新資訊28at.com

圖片jLM28資訊網(wǎng)——每日最新資訊28at.com

可以看到變的非常的快，這也對于用戶體驗(yàn)不太好，所以我們需要優(yōu)化一下jLM28資訊網(wǎng)——每日最新資訊28at.com

圖片jLM28資訊網(wǎng)——每日最新資訊28at.com

間隔優(yōu)化

現(xiàn)狀是每過一幀就實(shí)時(shí)計(jì)算一下，我們可以優(yōu)化一下，隔幾幀再計(jì)算一次幀數(shù)，這樣就不會(huì)更新得太頻繁了~jLM28資訊網(wǎng)——每日最新資訊28at.com

圖片jLM28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在就比較穩(wěn)定了，沒那么頻繁了~jLM28資訊網(wǎng)——每日最新資訊28at.com

圖片 jLM28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-67846-0.html寫一個(gè) Vue3 Hooks，準(zhǔn)確計(jì)算網(wǎng)頁的幀數(shù) FPS

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

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

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