drawcall优化 - 无限滚动容器

这是一个前端项目常见的一个问题dc优化。比如一个复杂的背包容器500个元素，如果使用粗暴的实例化500个元素进去，最终的dc无疑会是灾难的。在内存管理和性能角度上讲也是铺张浪费的。

看见效果如下 dc 1091

 

但实际上500个元素itemCell，在一个屏幕视界内能看到和交互的也就6~8个。从效能上考虑，只要能无缝衔接和复用少量的元素就能满足用户需求，根本不需要填鸭式的创建并使用500个itemCell。

基于这个优化方向，做一下简单的规则设计。

 

把屏幕分成3个区块 上下红色是过渡区，用来缓冲蓝色方块的itemCell， 中间绿色是可见有效区，实时一致的显示给到用户的itemcell

我们需要做的几件事是：

1.创建少量的itemCell置于content节点下，暂定18个

2.计算并控制好滑动区域(绿色区域)itemCell的间距大小，按照滑动行程，每2行(4个itemCell)的高度进行一次更新

3.更新的操作是重绘当前的容器子节点，并同时执行ScrollView.scrollToOffset，对齐子节点位置，让用户无感的衔接到重绘后的容器布局和位置，保证观感一致

4.校验并处理滑动上下边界问题。

 

以下是演示效果 dc优化到96 (实际占用只有40左右 ，每个itemCell 占用2)

 

 

废话不多说，上代码

import { _decorator, instantiate, Label, Node, ScrollView,UITransform, Vec2 } from 'cc';
import { UIbase } from '../UIbase';
import { itemCell } from '../../../module_recovery/itemCell';
const { ccclass, property } = _decorator;@ccclass('UINotice7')
export class UINotice7 extends UIbase {@property({ type: Node, displayName: "滑动器" })private scrollNode: Node = null;@property({ type: Label, displayName: "滚动条真实y值" })private offsetLabel: Label = null;@property({ displayName: "元素数量" })private cellNum: number = 50;@property({ displayName: "无限滚动备选item数量" })private itemActualCount: number = 18;@property({ displayName: "每一页item数量" })private itemPageCount: number = 4;private scroll;//拖动窗口高度private viewHeigh = 0;private celllHeigh = 0;public static Instance: UINotice7 = null;//元素池// private cellPool: any = [];//元素下标private cellIndex = 0;//滚动条换算起点y// private transOffsetY = 0;//数据池private dataPool: any = [];//容器触底private isBottom = false;_onLoad(): void {UINotice7.Instance = this;this.node.active = false;// CMF.Instance.zIndex(this.node, UIZindex.UINotice2);this.scroll = this.scrollNode.getComponent(ScrollView)const cellNode = this.scroll.node.children[0].children[0].children[0];this.celllHeigh = cellNode.getComponent(UITransform).height;//生成数据池for (let index = 0; index < this.cellNum; index++) {this.dataPool.push(index)}console.log("初始化 this.dataPool  " + this.dataPool.length)// //动态创建阵列节点 全部// for (let index = 0; index < this.cellNum - 1; index++) {//     let insNode = instantiate(cellNode);//     insNode.setParent(this.scroll.node.children[0].children[0]);// }//动态创建 有限的阵列节点 ，n = itemActualCountfor (let index = 0; index < this.itemActualCount - 1; index++) {let insNode = instantiate(cellNode);insNode.setParent(this.scroll.node.children[0].children[0]);}this.initItemCellData()this.scroll.node.on("scrolling", this.scrolling, this);this.scroll.node.on("scroll-began", this.scrollBegan, this);// this.scroll.node.on("scroll-to-top", () => { console.log("scroll-to-top") }, this);// this.scroll.node.on("scroll-to-bottom", () => { console.log("scroll-to-bottom") }, this);this.scroll.node.on("scroll-ended", this.scrollEnd, this);this.viewHeigh = this.scroll.node.children[0].getComponent(UITransform).height;console.log("窗口可以显示 n行元素: " + this.viewHeigh / this.celllHeigh)}//初始化item数据
    initItemCellData() {let contentNode = this.scrollNode.getChildByPath("view/content");console.log("更新cell 数据下标 " + this.cellIndex)for (let index = 0; index < contentNode.children.length; index++) {let element = contentNode.children[index];if (this.dataPool.length > this.cellIndex + index) {let dataId = this.dataPool[this.cellIndex + index]let itemC = element.getComponent(itemCell);itemC.init(dataId);element.active = true;}else {element.active = false;this.isBottom = true;}}}_onDestroy(): void {UINotice7.Instance = null;}scrolling(scrollview: ScrollView, eventType, customEventData) {// let tmpPercent = 0.5 //翻页触发百分比let offsetY = this.scrollNode.getComponent(ScrollView).getScrollOffset().y;let changeHeigh = this.celllHeigh * 2let Redundant = this.viewHeigh / 2//冗余的Y空间// console.log("scrolling " + "," + offsetY_percent.toFixed(2));if (!this.isBottom && offsetY >= changeHeigh + Redundant) {//刷新，数据下标 向下翻动一页this.cellIndex += this.itemPageCount;console.log("cellIndex + ", this.itemPageCount, this.cellIndex)this.refreshContent(- changeHeigh);}else if (this.cellIndex >= this.itemPageCount && offsetY <= (Redundant - changeHeigh)) {//刷新，数据下标 向下翻动一页this.cellIndex -= this.itemPageCount;this.refreshContent(changeHeigh);this.isBottom = false;}}scrollBegan(scrollview: ScrollView, eventType, customEventData) {// this.lastoffsetY = this.scrollNode.getComponent(ScrollView).getScrollOffset().y;// console.log("scrollBegan " + "," + this.lastoffsetY);
    }scrollEnd(scrollview: ScrollView, eventType, customEventData) {let offsetY = this.scrollNode.getComponent(ScrollView).getScrollOffset().y;console.log("scrollEnd " + "," + offsetY);}protected update(dt: number): void {this.offsetLabel.string = "Y坐标 " + this.scrollNode.getComponent(ScrollView).getScrollOffset().y.toFixed(2);}//动态刷新容器阵列
    private refreshContent(toOffsetY) {toOffsetY = toOffsetY - 20if (this.cellIndex > this.dataPool.length - this.itemPageCount) {this.cellIndex = this.dataPool.length - this.itemPageCount;}if (this.cellIndex < 0)this.cellIndex = 0;console.log("动态更新阵列 元素下标" + this.cellIndex, "翻页重定位 deltaY " + toOffsetY)//动态刷新容器阵列this.initItemCellData()//更新滚动条ylet offsetY = this.scrollNode.getComponent(ScrollView).getScrollOffset().y;this.scrollNode.getComponent(ScrollView).scrollToOffset(new Vec2(0, offsetY + toOffsetY))}
}