刷新率 useFps

赞助

实时监测浏览器刷新率 FPS 的组合式函数

Show Source Code

/**
 * 组合式函数
 * 实时监测浏览器刷新率FPS
 *
 * FPS值可以帮助开发者识别性能瓶颈，以优化应用的性能
 *
 * @returns {{ fps: Ref<number> }} 返回一个包含 FPS 值的 ref 对象
 */
import { ref, onMounted, onUnmounted } from 'vue'
import type { Ref } from 'vue'
export function useFps(): { fps: Ref<number> } {
  const fps = ref<number>(0)
  const frameCount = ref<number>(0)
  let lastTime = performance.now()
  let rafId: number | null = null // 当前帧请求 ID，用于卸载时取消帧回调
  const every = 10
  const calculateFrameRate = (currentTime: number) => {
    frameCount.value++
    if (frameCount.value >= every) {
      // 每 every 帧进行一次 FPS 计算
      const timeDiff = currentTime - lastTime
      fps.value = Math.round(1000 / (timeDiff / every))
      lastTime = currentTime
      frameCount.value = 0
    }
    rafId = requestAnimationFrame(calculateFrameRate)
  }
  // SSR（Node）环境无 requestAnimationFrame，帧循环放到挂载后启动，浏览器端行为不变
  onMounted(() => {
    rafId = requestAnimationFrame(calculateFrameRate)
  })
  // 卸载时取消帧回调，否则该循环会永久自我续期，并持续持有 fps / frameCount 等状态
  onUnmounted(() => {
    if (rafId !== null) {
      cancelAnimationFrame(rafId)
      rafId = null
    }
  })
  // 返回帧率状态
  return { fps }
}

基本使用

帧率：0

<script setup lang="ts">
import { useFps } from 'vue-amazing-ui'
const { fps } = useFps()
</script>
<template>
  <h3>帧率：{{ fps }}</h3>
</template>

Return

名称	说明	类型
fps	实时监测的浏览器刷新率	Ref<number>