试试claude+vueuse这两个api来进行性能优化

前言

在个人项目的开发过程中，我最近实现了站内信功能，其中包括每 10 秒轮询一次后端接口以获取未读消息数量的功能。

起初，这一功能在本地开发环境中运行良好，未读消息数量能够及时更新。然而，当我在实际使用中频繁切换浏览器标签页时，观察到后端控制台日志中出现了大量重复的轮询请求记录。

这让我意识到，当页面处于非活跃状态（即用户切换到其他标签页）时，继续高频率地发送轮询请求显然是不合理的，这不仅浪费了后端资源，也可能影响用户体验。

探索优化方案

为了优化这一问题，我决定寻找一种方法来动态调整轮询频率，甚至在标签页非活跃时暂停轮询。我的目标是实现一种机制，使得当用户切换回当前标签页时，轮询能够快速恢复，而当标签页处于非活跃状态时，减少轮询频率或暂停轮询。

首先，我想到的是监听浏览器的 visibilitychange 事件，这个事件能够在标签页的可见性状态改变时触发。然后，根据标签页的可见性状态来动态调整轮询的频率。

具体来说，当标签页处于可见状态时，以正常频率（每 10 秒）发送轮询请求；当标签页处于不可见状态时，延长轮询间隔或者暂停轮询。

为了实现这一功能，我选择了 VueUse 提供的组合式 API。

VueUse 是一个非常实用的 Vue 组合式 API 库，它提供了许多便捷的函数来处理常见的前端开发场景。在本次优化中，我主要用到了 useIntervalFn 和 useVisibilityChange 这两个组合式 API。

由于这两个api我不是很熟悉，我就询问了一下claude，下面是他给的方案

不得不说，他的代码解读很不错，让我对这两个api的了解更加清晰，那就开干吧，优化开始

这是他提供的简化版本，但是我们也发现问题了，木有进行销毁，最好还是进行一个hooks封装

再次询问之后，以下是我在项目中实现的优化代码：

// useVisibilityPolling.ts
import { useDocumentVisibility, useIntervalFn, Fn } from '@vueuse/core'
import { watch, onScopeDispose } from 'vue'

export function useVisibilityPolling(fn: Fn, interval = 5000, immediate = false) {
    const visibility = useDocumentVisibility()
    const { pause, resume, isActive } = useIntervalFn(fn, interval, { immediate })

    watch(visibility, (state) => {
        if (state === 'visible') {
            console.log('[useVisibilityPolling] 📢 页面可见，恢复轮询')
            resume()
        } else {
            console.log('[useVisibilityPolling] 🔇 页面不可见，暂停轮询')
            pause()
        }
    })

    // 👇 组件销毁时自动清理定时器
    onScopeDispose(() => {
        console.log('[useVisibilityPolling] 🧹 销毁定时器')
        pause()
    })

    return {
        pause,
        resume,
        isActive,
        visibility,
    }
}

代码解析

在这段代码中，使用useDocumentVisibility来监听页面的切换，减少服务器压力，切换回来才会请求接口， 最后，在组件挂载时启动轮询，并在组件卸载时清除轮询定时器，以避免内存泄漏。

组件使用

在组件中使用，是不是很简洁呀~

const { isActive } = useVisibilityPolling(fetchUnreadCount, 5000, true)

总结

通过这次优化，我成功地减少了在标签页非活跃状态下不必要的轮询请求，降低了后端服务器的负担，同时提升了应用的性能和用户体验。VueUse 提供的组合式 API 使得实现这一功能变得非常简洁和高效。

如果你在项目中也有类似的轮询场景，不妨考虑采用类似的优化策略。监听页面可见性变化并动态调整轮询频率，是一种简单而有效的优化方法。