Laya 使list渲染支持分帧的思路

Laya 使list渲染支持分帧的思路

@author ixenos 2019-09-06

 

 

1.由于Laya的list渲染时没有做分帧处理，只做了延迟帧处理，所以当单页元素较多时，会有大量运算卡帧的情况，

结合之前 Laya 分帧加载优化 这篇文章，对其中renderItems做出优化

 

2.原renderItems：

        /**
         * @private
         * 渲染单元格列表。
         */
        protected function renderItems(from:int = 0, to:int = 0):void {
            for (var i:int = from, n:int = to || _cells.length; i < n; i++) {
                renderItem(_cells[i], _startIndex + i);
            }
            changeSelectStatus();
        }

 

3.分帧方案：

        private var _latterFrom:int = 0;
        private var _latterTo:int = 0;
        protected function renderItems(from:int = 0, to:int = 0):void {
            _latterFrom = from;
            _latterTo = to;
            Laya.timer.clear(this, onLatterFrames);
            Laya.timer.frameLoop(1, this, onLatterFrames);
        }
        
        private var _renderSt:Number = 0;
        private var _renderTLimit:Number = 0;
        public var latterFrameRatio:Number = 0.8;//运行时脚本占帧时间比，这个用来调优 --ixenos
        protected function onLatterFrames():void {
            _renderTLimit = 1000/60*latterFrameRatio;
            _renderSt = new Date().getTime();
            _latterTo = _latterTo>0?_latterTo:_cells.length;
            for (var i:int = _latterFrom; i < _latterTo; i++) {
                var curT:Number = new Date().getTime();
                if(curT - _renderSt > _renderTLimit){
                    _latterFrom = i;//暂存进度
                    return;
                }
                renderItem(_cells[i], _startIndex + i);
                changeCellState(_cells[i], _selectedIndex === _startIndex + i, 1);
            }
            Laya.timer.clear(this, onLatterFrames);
        }