当前位置：首页 > wzjs >正文

深圳全网营销网站百度查看订单

wzjs 2025/7/20 5:09:31

深圳全网营销网站,百度查看订单,西安网站建设雄账号,做网站用国内还是国外的vps主要用于实时监听当前浏览器页面的刷新率工具函数源码 /*** 组合式函数* 实时监测浏览器刷新率FPS** FPS值可以帮助开发者识别性能瓶颈，以优化应用的性能** returns {Object} 返回一个包含 FPS 值的 ref 对象*/ import { ref } from vue export function useFps(…

主要用于实时监听当前浏览器页面的刷新率

工具函数源码

/*** 组合式函数* 实时监测浏览器刷新率FPS** FPS值可以帮助开发者识别性能瓶颈，以优化应用的性能** @returns {Object} 返回一个包含 FPS 值的 ref 对象*/
import { ref } from 'vue'
export function useFps() {const fps = ref<number>(0)const frameCount = ref<number>(0)let lastTime = performance.now()const every = 10const calculateFrameRate = (currentTime: number) => {frameCount.value++if (frameCount.value >= every) {// 每 every 帧进行一次 FPS 计算const timeDiff = currentTime - lastTimefps.value = Math.round(1000 / (timeDiff / every))lastTime = currentTimeframeCount.value = 0}requestAnimationFrame(calculateFrameRate)}requestAnimationFrame(calculateFrameRate)// 返回帧率状态return { fps }
}

效果如下图

在这里插入图片描述

在线预览

基本使用

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