CocosCreator ScrollView性能优化

ScrollView是比较常用的UI组件之一，游戏中的任务榜、排行榜都少不了它，实际使用中存在一个问题，例如：在排行榜中要显示前100名玩家，如果真的把这100名玩家的信息全部创建，并加载进ScrollView，对移动设备的宝贵内存会是巨大的浪费。其实玩家在屏幕上总能看到的最多只有7、8项而已，所以实际上只用创建比显示多一点的数量，再通过缓冲区实时动态更新数据，就可以给玩家呈现出尽可能多数量的列表（依内存而定，理论上无限），即节省内存，也不影响性能。

动态更新原理

要了解它的运行原理，先看下图：

动态更新原理.jpg

如图把ScrollView分成三部分，按区域从小到大依次是：

1. 屏幕可见区：指屏幕上玩家可看可操作的列表区域，随着滚动会显示不同内容；
2. 缓冲区：指内存中真正创建了的列表所占的区域，包含屏幕可见区，比可见区多出一部分用于动态更新；
3. content区：指整个ScrollView用来滚动的区域，通常数据有多少就有多大，包含缓冲区，其余部分空白；

假设总共要显示100项数据，可视区能容纳7项，缓冲区有15项，多出8项用于动态更新。再分三种情况讲解：

1. 刚初始化完成时：此时在右侧按钮上提示有100行，实际上只创建了第1-15行，而玩家能看到的是第1-7行。如果玩家想要看到更多，必然会向上或向下滚动屏幕；
2. 向上滚动时：在移动设备上，如果玩家想要看到下面的行，所做的操作是触摸往上滑动，则整个content区往上移动，也带动content区的item往上移动，更新函数会不断遍历所创建的15项item，如果检测到某item的y坐标超出了缓冲区的上边界（该item已经被玩家看过或不想再看），则把该item往下移动一个缓冲区的高度（移动该item到玩家即将看到的位置），并更新它的显示ID；
3. 向下滚动时：同理，content区的item往下移动，update不断遍历所创建的15项item，如果检测到某item的y坐标越过了缓冲区的下边界（该item已经被玩家看过或不想再看），则把该item往上移动一个缓冲区的高度（移动该item到玩家即将看到的位置），并更新它的显示ID；

关键代码

     // 返回item在ScrollView空间的坐标值
    getPositionInView (item) {
        const worldPos = item.parent.convertToWorldSpaceAR(item.position)
        const viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos)
        return viewPos
    },

    // content位置改变时调用，根据滚动位置动态更新item的坐标和显示(所以spawnCount可以比totalCount少很多)
    _updateContentView () {
        if (!this.isInit || !this.canUpdateFrame) {
            return // we don't need to do the math every frame
        }
        this.canUpdateFrame = false

        const items = this.items
        const isDown = this.scrollView.content.y < this.lastContentPosY
        // offset为缓冲区高度，item总是上移或下移一个缓冲区高度
        // BufferZone和-BufferZone为ScrollView中，缓冲区上边界和下边界的位置
        const offset = (this.itemHeight + this.spacing) * this.cacheRow
        let newY = 0

        for (let i = 0; i < items.length; i += this.colCount) {
            const viewPos = this.getPositionInView(items[i])
            if (isDown) {
                newY = items[i].y + offset
                if (viewPos.y < -this.bufferZone && newY < 0) {
                    for (let j = 0; j < this.colCount; j++) {
                        const index = j + i
                        items[index].y = newY
                        const itemId = items[index].itemId - this.spawnCount// update item id
                        items[index].itemId = itemId
                        if (itemId >= 0) {
                            items[index].active = true
                            this.itemUpdateFunc(itemId, items[index], this.data[itemId])
                        } else {
                            items[index].active = false
                        }
                    }
                }
            } else {
                newY = items[i].y - offset
                if (viewPos.y > this.bufferZone && newY > -this.content.height) {
                    for (let j = 0; j < this.colCount; j++) {
                        const index = j + i
                        items[index].y = newY
                        const itemId = items[index].itemId + this.spawnCount// update item id
                        items[index].itemId = itemId
                        if (itemId < this.data.length) {
                            items[index].active = true
                            this.itemUpdateFunc(itemId, items[index], this.data[itemId])
                        } else {
                            items[index].active = false
                        }
                    }
                }
            }
        }

        // 更新lastContentPosY
        this.lastContentPosY = this.scrollView.content.y
        this.canUpdateFrame = true
    },

完整代码地址：ScrollViewHelper