useFps
Berapa bingkai per detik yang sedang digambar peramban.
0
bingkai per detik, dihitung tiap 15 bingkai
Diukur tiap every bingkai, bukan tiap bingkai: menghitung dari satu bingkai ke bingkai berikutnya menghasilkan angka yang melompat-lompat dan tidak terbaca. Bawaannya 10, sama seperti sumbernya.
cancelAnimationFrame di pembersihan bukan kelengkapan. Tanpa itu, satu komponen yang dibuka dan ditutup berulang kali meninggalkan gelung requestAnimationFrame untuk tiap kemunculannya, dan semuanya terus berjalan selamanya di latar — jenis kebocoran yang tidak pernah terlihat sampai halamannya melambat tanpa sebab yang jelas.
Pemasangan
npx shadcn-vue@latest add @kliping/use-fps Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: is-browser, saat-terpasang.
Salin dulu is-browser, saat-terpasang — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { getCurrentScope, onScopeDispose, readonly, ref } from 'vue'
import { isBrowser } from '@/lib/is-browser'
import { saatTerpasang } from '@/lib/saat-terpasang'
export interface UseFpsOptions {
/** Hitung ulang tiap sekian bingkai. Bawaan: 10. */
every?: number
}
export function useFps(options: UseFpsOptions = {}) {
const { every = 10 } = options
const fps = ref(0)
let bingkai: number | undefined
const hentikan = () => {
if (bingkai !== undefined) {
cancelAnimationFrame(bingkai)
bingkai = undefined
}
}
saatTerpasang(() => {
if (!isBrowser
|| typeof performance === 'undefined'
|| typeof requestAnimationFrame === 'undefined') {
return
}
let jumlah = 0
let sejak = performance.now()
const ukur = () => {
const sekarang = performance.now()
jumlah += 1
if (jumlah >= every) {
const selisih = sekarang - sejak
fps.value = selisih > 0 ? Math.round((jumlah * 1000) / selisih) : 0
jumlah = 0
sejak = sekarang
}
bingkai = requestAnimationFrame(ukur)
}
bingkai = requestAnimationFrame(ukur)
})
if (getCurrentScope())
onScopeDispose(hentikan)
return readonly(fps)
}API
export interface UseFpsOptions {
/** Hitung ulang tiap sekian bingkai. Bawaan: 10. */
every?: number
}
export function useFps(options: UseFpsOptions = {})