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")

  

时间: 2024-08-05 03:02:28

h5列表页的性能优化的相关文章

dede列表页分页地址优化(不同url相同内容问题解决)&lt;转自http://www.966266.com&gt;

<注明,完全转自http://www.966266.com/seoblog/?p=75> 存在问题 DEDE默认分类分页地址存在不同URL相同内容问题,导致内容重复,对SEO非常不利.情况如下分页列表: <li><a href='list_4_1.html'>首页</a></li> <li><a href='list_4_3.html'>上一页</a></li> <li><a hr

[转] 钉钉的H5性能优化方案

对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. 用户感受 当用户能够在1-2秒内打开H5页面,看到信息的展示,或者能够开始进行下一步的操作,用户会感觉速度还好,可以接受:而页面如果在2-5秒后才进入可用的状态,用户的耐心会逐渐丧失:而如果一个界面超过5秒甚至更久才能显示出来,这对用户来说基本是无法忍受的,也许有一部分用户会退出重新进入,但更多的用户会直接放弃使用.

H5缓存机制浅析-移动端Web加载性能优化【干货】

转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Dom Storgage(Web Storage)存储机制 2.3 Web SQL Database存储机制 2.4 Application Cache(AppCache)机制 2.5 Indexed Database (IndexedDB) 2.6 File System API 3 移动端Web加载

移动H5前端性能优化指南(转载)

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指

H5 缓存机制浅析 移动端 Web 加载性能优化

1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. H5 应用程序缓存为应用带来三个优势: 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,有些是 H5 才新加入的. 浏览

移动H5前端性能优化指南[转]

移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑

H5性能优化方案

H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. 用户感受 当用户能够在1-2秒内打开H5页面,看到信息的展示,或者能够开始进行下一步的操作,用户会感觉速度还好,可以接受:而页面如果在2-5秒后才进入可用的状态,用户的耐心会逐渐丧失:而如果一个界面超过5秒甚至更久才能显示出来,这对用户来说基本是无法忍受的,也许有一部分用户会退出重新进入,但更多的用

移动H5前端性能优化指南

概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南 [加载优化] 加载过程

H5页面性能优化

H5性能优化的两个原则 1.最少化请求个数 2.最小单个文件大小 最少请求个数 为什么要减少请求次数: 手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个) 如何减少请求次数: 1.合并图片(将若干个小图合并成一个大图.雪碧图) 2.合并JS/CSS文件(Nginx_concat_module) 天猫与淘宝的线上实践: 相同网络条件下合并后与合并前的数据对比: 文件大小:2.0KB     小于   1.2KB +  942B + 997B 下载耗时:761ms