h5列表页的性能优化

//0.还原状态
caoke.loading=false
                $(".loadbtn").text("点击加载更多")
                //1 还没有任何数据的情况
                if(data.object.list.length==0){
                 //是否是第一页
                    if(data1.pageNo==1){
                        caoke.noneData1++
                    }
                    caoke.nextPage()
                }else{
                    //2.有数据的情况
                    if(caoke.index==2&&data1.pageNo==1){
                        $('<div class="tips-info soon-info"><span class="soon-info-text">你还可以看看以下即将出租的房屋</span></div>').appendTo(".data-list")
                    }
                    //解析数据
                    caoke.domReady=false
                    setTimeout(function(){
                        caoke.domReady=true
                        $(window).trigger("scroll")
                    },data.object.list.length*400)
                    for(var i=0;i<data.object.list.length;i++){
                        var item=data.object.list[i];
                        item.index=caoke.index
                        var html=$.parseTpl(caoke.tpl1, {
                            "item":item,
                            numParams:numParams
                        })
                        caoke.render(html,"bottom")
                    }
                    //3 数据不够的时候
                    if(data.object.list.length<data1.pageSize){
    //4是否是第一页
                        if(data1.pageNo==1&&caoke.index==2){
                            caoke.endnoneshow=true
                        }
                        caoke.nextPage()

                    }
                    data1.pageNo++
                }            

error:function(){
                $(".loadbtn").text("点击加载更多")
                //5加载完成，改变状态
                caoke.loading=false
            }

　　上面是处理数据的几种情况

 

下面是列表性能优化的函数，判断是否在可视区域，不在可视区域的dom隐藏，这样就不占渲染内存

//滚动加载都是先从缓存里面加载，当没有缓存的时候，ajax加载
        var topCache= [],bottomCache=[]
        var windowheight=$(window).height()
        var prevtop= 0,direct=1
        var num=0


        function autodd(e){

            var scrollTop=$("body")[0].scrollTop

            if(Math.abs(scrollTop-prevtop)>100){
                if(scrollTop>prevtop){
                    direct=1
                }else{
                    direct=-1
                }
                prevtop=scrollTop
                var curArr=[]
                caoke.midpArr.forEach(function(item,index){
                    if(Math.abs(item-(windowheight/2+scrollTop))<2*windowheight){
                        curArr.push(index)
                    }
//                if(direct==1){
//                   if( item<2*windowheight+scrollTop&&item>scrollTop){
//                       curArr.push(index)
//                   }
//                }else{
//                    if(scrollTop+windowheight-item>0&&scrollTop-item<windowheight){
//                        curArr.push(index)
//                    }
//                }
                })
//                //console.log(curArr)
                var prevNum=0
                curArr.forEach(function(item){
                    prevNum+=item
                })

                if(prevNum!=caoke.prevNum){

                    caoke.prevNum=prevNum
                    if(direct==1){
                        for(var ki=0;ki<curArr[0];ki++){
                            if(topCache.indexOf(ki)==-1){
                                topCache.push(ki)
                                caoke.domArr[ki].hide()
                            }
                        }
                    }else{
                        for(var ki2=curArr[curArr.length-1]+1;ki2< caoke.domArr.length;ki2++){
                            if(bottomCache.indexOf(ki2)==-1){
                                bottomCache.push(ki2)
                                caoke.domArr[ki2].hide()
                            }
                        }
                    }

                    curArr.forEach(function(item){
                        if(topCache.indexOf(item)>-1){
                            topCache.splice(topCache.indexOf(item),1)
                            caoke.domArr[item].show()
                        }
                        if(bottomCache.indexOf(item)>-1){
                            bottomCache.splice(bottomCache.indexOf(item),1)
                            caoke.domArr[item].show()
                        }
                    })
                }
            }
        }

        caoke.domReady=true
        $(window).on("touchstart touchmove scroll",function(e) {
            if(!caoke.domReady){
                return
            }
            //下滚动加载
            if(!caoke.loading){
                var scrollTop = $("body")[0].scrollTop
                var documentheight = $(document).height()
                if (scrollTop + windowheight + 200 >= documentheight) {
                    caoke.loading=true
                    caoke.addJsonp()
                    //console.log("加载数据")
                }
            }
            autodd()

        })

        $(".loadbtn").on("click",function(){
            if(!caoke.loading||$(this).text()=="点击加载更多"){
                caoke.loading=true
                caoke.addJsonp()
                //console.log("加载数据")
            }
        })
        $(".loadbtn").trigger("click")