【渲染优化】动态调整虚拟列表刷新率：让代码学会偷懒

news/2025/10/30 11:06:53/文章来源:https://www.cnblogs.com/mikeCao/p/19176322

🚀 动态调整虚拟列表刷新率：让代码学会"偷懒"

引擎版本：Cocos Creator 3.x
阅读时间：5分钟（能帮你省8小时调试）

🚑 翻车现场

那天是周五下午 4 点半，我正打算提交代码下班。
测试小姐姐突然跑过来一句：
“你这个商城列表，在我手机上滑动的时候卡得我想摔手机！”

我一脸懵逼：
“啊？我在 iPhone 14 Pro 上测试很丝滑啊！”

拿过她的红米 Note 9 一滑——

卧槽，真的卡。

再试试快速滑动——

卧槽，更卡了。

我打开 Chrome DevTools 看性能面板，帧率从 60 狂掉到 25，一大片红色警告条刺眼地躺在那里：

OnScrolling() - 35ms ⚠️
UpdateVisibleItems() - 28ms ⚠️
CalculateVisibleRange() - 15ms ⚠️

心里默默地叹了口气：
“完蛋鸟，又是一个不眠的周末。”

🤔 问题的根源

我翻开了以前写的虚拟列表代码：

// 我之前的写法（估计很多人也这么写）
private onScrolling(): void {this.updateVisibleItems(); // 每次滚动都刷新
}

看起来挺合理的对吧？
滚动更新可见项，天经地义。

但我忽略了一个残酷事实：

Cocos 的 scrolling 事件，在快速滑动时，1 秒能触发 60 次！

也就是说，我的 updateVisibleItems() 每秒执行 60 次，干的事还挺重：

计算可见区间（遍历位置数组）
回收旧节点（遍历 Map）
创建新节点（对象池、设置位置、更新数据）

60 次 × 每次 30ms = 1800ms 的计算量。

一秒钟才 1000ms，非要干 1800ms 的活儿——
不卡才怪。

💡 灵魂拷问：真的需要刷新那么快吗？

我冷静想了想。
当用户快速甩动列表时，他真的能看清里面的内容吗？

答案是：根本看不清。

你可以自己试试，打开淘宝、微信朋友圈，快速滑动时会发现：

内容略模糊（其实没完整渲染）
停下来才变清晰
但完全不会觉得“卡”

原来大厂早就在玩这个骚操作：快速滚动时，故意降低刷新率。

就像拍电影——打斗戏 24 帧就够，定格镜头才用 60 帧。

🎯 我的方案：让列表自己决定要不要刷新

核心思路特别简单，就四句话：

1️⃣ 慢速滑动 → 用户能看清 → 必须刷新 → 60fps
2️⃣ 快速滑动 → 用户看不清 → 少刷几次 → 20fps
3️⃣ 卡顿明显 → 设备吃不消 → 降级模式
4️⃣ 滑动停止 → 强制刷新 → 确保显示完整

听起来挺复杂，其实不到 100 行代码就能搞定。

🧭 第一步：给列表装个“速度计”

export class PerformanceManager {private lastPos = 0;private lastTime = 0;private speed = 0;shouldUpdate(currentPos: number): boolean {const now = Date.now();const timePassed = now - this.lastTime;if (timePassed < 16) return false; // 每帧间隔16msconst moved = Math.abs(currentPos - this.lastPos);this.speed = moved / (timePassed / 1000);if (this.speed > 2000) {if (timePassed < 50) return false; // 飞速滑动，20fps} else if (this.speed > 1000) {if (timePassed < 33) return false; // 快速滑动，30fps}this.lastPos = currentPos;this.lastTime = now;return true;}
}

简单说：
速度越快 → 刷新越少 → 性能越稳。

🧩 第二步：改造滚动逻辑

private onScrolling(): void {const offset = this.scrollView.getScrollOffset();const pos = this.scrollView.vertical ? offset.y : offset.x;if (this.perfManager.shouldUpdate(pos)) {this.updateVisibleItems(); // 该刷才刷}this.onScrollProgress();
}private onScrollEnded(): void {this.updateVisibleItems(); // 停下来强制刷新
}

只加了一个判断，改动极小，零侵入。

🛡️ 第三步：加个“低性能模式”

recordFrameTime(time: number): void {this.frameTimes.push(time);if (this.frameTimes.length > 5) this.frameTimes.shift();const slowFrames = this.frameTimes.filter(t => t > 16).length;this.isLowPerformanceMode = slowFrames >= 3;if (this.isLowPerformanceMode) {console.warn('⚠️ 进入低性能模式，降低刷新率保证流畅');}
}

当连续几帧掉帧，就自动降级刷新频率。
你说是不是很“智能”？😎

📊 实测结果

手机型号	优化前	优化后	提升幅度	刷新次数/秒
iPhone 14 Pro	54 fps	60 fps	↑ 11%	60 → 35
小米 12	38 fps	55 fps	↑ 45%	60 → 28
红米 Note 9	23 fps	42 fps	↑ 83%	60 → 18

没看错，低端机性能提升了 83%！
而代码改动量，不到 100 行。

🧠 进阶优化：动态缓冲区

再来一个锦上添花的小优化——

private getBufferSize(): number {const speed = this.perfManager.getSpeed();if (speed > 2000) return 3; // 飞速滑动：3屏缓冲if (speed > 1000) return 2; // 快速滑动：2屏缓冲return 1;                   // 慢速滑动：1屏缓冲
}

滑得越快，就多加载几屏内容，防止白屏。