摘要
首页楼层、商品卡片、筛选弹窗等高频组件频繁销毁重建会造成 DOM 重复渲染，拖慢页面切换速度。本文基于 Vue 内置 keep-alive 封装全局组件缓存管理工具，支持手动清除指定组件缓存、设置缓存有效期，减少重复 DOM 渲染开销，bidfans 前端所有公共通用组件均接入该缓存方案。
一、组件频繁重建性能损耗
用户在商品列表、详情页来回切换时，商品筛选弹窗、分类侧边栏每次销毁重建，DOM 反复创建销毁，低端手机页面出现卡顿；列表滚动刷新后，顶部楼层组件重新请求接口、重新渲染，增加接口请求压力；无缓存区分机制，临时弹窗与常驻页面共用缓存池，无用组件长期占用浏览器内存，页面久用卡顿。单纯全局缓存所有组件会造成内存溢出，无法精准清理临时组件缓存。
二、全局缓存工具核心代码
// 全局组件缓存管理工具 export default { // 缓存组件白名单，仅缓存常驻公共组件 cacheWhiteList: ['FloorCard', 'GoodsFilter', 'SiteNav'], // 存储过期缓存组件名称 expireCacheSet: new Set(), // 标记组件缓存过期 markExpire(compName) { if(this.cacheWhiteList.includes(compName)){ this.expireCacheSet.add(compName) } }, // 过滤过期组件，keep-alive自动剔除 filterCache(name) { return !this.expireCacheSet.has(name) && this.cacheWhiteList.includes(name) }, // 清空全部临时缓存 clearAllTempCache() { this.expireCacheSet.clear() } }页面根节点 keep-alive 通过 filterCache 方法过滤组件，仅白名单常驻组件缓存，弹窗、临时详情不进入缓存；切换站点、退出登录时调用清理方法，清空过期缓存释放内存。
三、分场景缓存生命周期管控
常驻公共组件（楼层卡片、顶部导航）长期缓存，页面切换不销毁；临时弹窗、商品详情卡片仅临时缓存，用户离开列表页自动标记过期，下次加载重新初始化。切换雅虎、煤炉站点时，自动清除原有楼层组件缓存，重新拉取对应站点推荐数据，避免不同站点楼层数据混杂展示。 缓存组件内置 activated 生命周期钩子，每次激活仅刷新基础变动数据，无需完整重新请求接口，复用上次 DOM 结构，列表滚动流畅度大幅提升。
四、内存释放兜底策略
监听页面 visibilitychange 事件，用户切走浏览器后台超过 5 分钟，自动清空全部组件缓存，释放浏览器内存；返回页面后重新按需缓存核心组件，长期浏览页面不会出现内存持续上涨卡顿。移动端低端设备自动降低缓存数量，仅保留首页核心组件，适配设备性能上限。 bidfans 接入组件缓存复用后，页面切换 DOM 渲染耗时减少 60%，移动端长时间浏览卡顿反馈显著降低。
结语
基于 keep-alive 封装的组件缓存管理工具，区分常驻、临时组件生命周期，搭配自动内存释放机制，在不占用过多浏览器内存的前提下减少重复渲染，适配多页面频繁切换的商品展示类前端项目。
