COCOS CREATOR的scroll view性能优化记录

最新推荐文章于 2025-10-15 14:17:00 发布

原创最新推荐文章于 2025-10-15 14:17:00 发布 · 1w 阅读

20 ·

CC 4.0 BY-SA版权

本文介绍了一种优化Scrollview性能的方法，通过仅加载可视区域内的item并预留缓冲区，有效减少内存消耗和提高加载速度，避免大量数据加载时的卡顿现象。

以前的listview很多人都有使用过，当加载大量数据的时候会出现卡顿也是经常有的事情，最主要的问题在于2个地方，

1 一次性创建过多的item 内存分配、ui布局等底层代码的消耗(这个不算最主要)

2 貌似listview的pushback...之类的方法会调用widget的clone十分消耗效率(这个重要..我也是从网上看来的...没看listview的源码)

我们需要的效果是秒加载无卡顿这个是最主要的目的,其次的目的如果加载过多的item肯定会造成内存飙升，我记得看到文章说有兄弟踩坑的时候加载大量item导致直接闪退...我在网上看了一部分文章觉得比较好的处理办法就是在scrollview的可视(剪裁区域内)加载能铺满整个区域的item,然后在多增加10个item 也就是说你需要加载的item的数量是scrollview.list.height / (item.heigh + spacingY) + 10 这个数量的item 一般来说也就10多个item的样子 ,整个scrollview只需要用到这么多的item 保证了内存的开销很低并且加载速度会非常的快.接下来的思路就是计算一个顶部最大Y坐标和底部最大Y坐标。

如图:

红色区域为scrollview的可视剪裁区,上部黑框和下部黑框是用来做缓冲的,假设可视区域内部一共只需要3个item即可填充满,那么我们需要的总共item数量是13个,剩下的10个是预留给上部黑框和下部黑框做缓冲的item, 也就是说当我们滑动这个scrollview的时候实际上是在移动scrollview内部的list这个node.我们可以在update中去循环检测每一个节点的Y坐标 ,当然我们需要先计算出这个最大Y和最小Y坐标,一旦发现某个item的Y坐标超出了最大Y或者最小Y的时候，如果是往上滑动则立即将这个item的内容重新刷新，然后将item移动到所有节点的最尾端,比如当前的item是0-13,一旦当item0的Y坐标大于最大Y的时候我们立马刷新该item的坐标到最底部,然后将item的内容刷新为第14个item的内容,反方向滑动同理解决. 这样我们即可实现在极少量的item数量下实现大量的item显示效果。既保证加载效率又保证内存开销低。下面是代码我这个做法呢写demo的时候并没有考虑多行多列的情况，仅仅是考虑了列表模式，用来做一些排行榜，任务列表是足够使用的。下面上代码，额代码写的不好，如有bug请大佬指教:

scrollview.js

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        //scrollview的view剪裁节点
        view:cc.Node,
        //scrollview的具体装载item的node
        list:cc.Node,
        //item的prefab
        itemPrefab:cc.Prefab,
        //item的间隔
        spacingY:0,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    onLoad () {
        //预加载的item的数据
        this.data = []
        //当前可视区域内部填充满需要的item数量
        this.rowItemCounts = 0 
        //创建的item节点的数组
        this.items = []
        //顶部最大Y
        this.topMax = 0
        //底部最小Y
        this.bottomMax = 0
        //上一次listnode的Y坐标
        this.lastListY = 0
        //itemprefab的高度
        this.itemHeight = 0
    },
    //我测试时使用的data array 只是一个int数组 [0,1,2,3,4]这样
    //itemprefab的updateitem方法如下
    // updateItem(data) {
    //     this.itemIndex.string = data //刷新标签
    // }
    //使用需调用init方法传递进data数组 
    init(data){
        this.data = data 
        //保存高度
        let height = 0
        //创建item 
        let item = cc.instantiate(this.itemPrefab)
        height = item.height
        this.itemHeight = height
        //计算可视区域内部填充满需要的item数量
        this.rowItemCounts = Math.ceil(this.view.height / (height + this.spacingY))
        //加载rowitemCounts + 10个item 
        for(let i =0 ; i < this.rowItemCounts + 10 ; ++ i){
            //数据已经加载完毕了 说明需要加载的数据量很小
            if(typeof data[i] == 'undefined')
                break 
            //data[i]为了测试方便实际上只是一个1 2 3这样的数字 具体data和updateItem方法的实现
            //你需要根据你自己的情况来实现 
            item.getComponent('ItemNode').updateItem(data[i])
            //记录一下itemid
            item.__itemID = i 
            //保存item到数组
            this.items.push(item)
            //加入item节点到scrollview的list里面
            this.list.addChild(item)
            //设置x坐标
            item.x = 20
            //设置y坐标 (根据自己设置的不同的锚点这些东西来调整能跑就完事了)
            item.y = - (height / 2 +  i * (height + this.spacingY ))
            //继续创建
            if(i < this.rowItemCounts + 9){
                item = cc.instantiate(this.itemPrefab)
            }
            
        }
        //设置list的高度 不设置无法滑动
        this.list.height = 20 + (data.length) * height + (data.length) * this.spacingY
        //计算顶部最大Y
        this.topMax = (5 * height + 4 * this.spacingY)
        //计算底部最小Y
        this.bottomMax = -(this.view.height + this.topMax)
        //保存list的当前Y坐标
        this.lastListY = this.list.y
    },
    update(){
        //判断是否往下滑动
        let isDown = this.list.y > this.lastListY
        //当前的item数量
        let countOfItems = this.items.length
        //预显示数据的总数量
        let dataLen = this.data.length
        //遍历所有item节点
        for (let i in this.items){
            let item = this.items[i]
            //item坐标转换到对应view节点的坐标 y坐标需要减去一半item的高度...具体看你item的锚点设置
            let itemPos = this.list.convertToWorldSpaceAR(item.position)
            itemPos.y -= this.view.height / 2
            itemPos = this.view.convertToNodeSpaceAR(itemPos)
            //如果是往下滑动
            if(isDown){
                //判断当前item的坐标是否大于顶部最大Y
                if(itemPos.y > this.topMax){
                    //计算新的itmeid 
                    //比如一共13个item item的索引就是0-12 那么第0个item超过y坐标之后 就需要显示第13个item
                    //那么就是将当前id + 当前item的数量即可
                    let newId = item.__itemID + countOfItems 
                    //如果item已经显示完毕了就不需要刷新了
                    if(newId >= dataLen) return 
                    //保存itemid
                    item.__itemID = newId
                    //计算item的新的Y坐标 也就是当前y减去所有item加起来的高度
                    item.y = item.y - countOfItems * this.itemHeight - (countOfItems ) * this.spacingY
                    //刷新item内容 
                    item.getComponent('ItemNode').updateItem(this.data[item.__itemID])
                }
                //如果是往上滑动
            }else { 
                //如果超过底部最小Y 和上面的一样处理一下就完事了
                if(itemPos.y < this.bottomMax){
                    let newId = item.__itemID - countOfItems
                    if (newId < 0) return
                    item.__itemID = newId
                    item.y = item.y + countOfItems * this.itemHeight + (countOfItems) * this.spacingY
                    item.getComponent('ItemNode').updateItem(this.data[item.__itemID])
                }
            }
        }
        //存储下当前listnode的Y坐标 
        this.lastListY = this.list.y
    }
    // update (dt) {},
});

加载代码如下

let data = []
        for (let i =0;i<10000;++i){
            data.push(i)
        }
        this.scroll.getComponent('ScrollView').init(data)

具体测试效果:

传递进入10000条数据实际上也就加载可视区域的数量+10而已动态不停的刷新就完事了..刷新频率可以降低点这样消耗会更低.这个破问题经常会面试被问到哎...动手解决一番麻麻再也不担心我被面试官虐了。