//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=falsesetTimeout(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.indexvar 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=1var num=0function autodd(e){var scrollTop=$("body")[0].scrollTopif(Math.abs(scrollTop-prevtop)>100){if(scrollTop>prevtop){direct=1}else{direct=-1}prevtop=scrollTopvar 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=0curArr.forEach(function(item){prevNum+=item})if(prevNum!=caoke.prevNum){caoke.prevNum=prevNumif(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].scrollTopvar documentheight = $(document).height()if (scrollTop + windowheight + 200 >= documentheight) {caoke.loading=truecaoke.addJsonp()//console.log("加载数据")}}autodd()})$(".loadbtn").on("click",function(){if(!caoke.loading||$(this).text()=="点击加载更多"){caoke.loading=truecaoke.addJsonp()//console.log("加载数据")}})$(".loadbtn").trigger("click")

  

转载于:https://www.cnblogs.com/caoke/p/5109419.html

h5列表页的性能优化相关推荐

  1. 京东三级列表页持续架构优化—前端优化实践

    在持续开发一个核心系统过程中,除了满足业务需求外,还应该考虑系统未来的架构,追求极致的系统的可用性.高性能和稳定性.这个过程是一个长期积累和重构的过程. 每个应用都要满足自己特定的需求,因为商业条件. ...

  2. 京东三级列表页持续架构优化—Golang+Lua(OpenResty)最佳实践

    分类列表入口 分类列表入口,可以通过京东首页首屏左侧导航进入,是用户购买商品的几大入口之一. 分类列表,展示各个分类的商品,有综合排序.价格排序.销量排序.上架时间排序.图书还有出版时间排序.可以按照 ...

  3. dedecms 栏目列表页链接如何优化

    这篇文章主要介绍了dedecms 栏目列表页链接如何优化,具有一定借鉴价值,需要的朋友可以参考下.希望大家阅读完这篇文章后大有收获.下面让小编带着大家一起了解一下.  dedecms 栏目列表页链接怎 ...

  4. 新手站长说说之织梦DedeCMS列表页标题SEO优化

    织梦DedeCMS列表页标题SEO优化 织梦无忧 织梦技巧 摘要: 织梦DedeCMS栏目列表的标题是重复的,在谷歌站长工具,就会有相关的提示:重复的标题标记,说明这个对搜索引擎是很不友好的.当然,这 ...

  5. Java 开源办公开发平台 O2OA V5.3.0 发布 | 移动版H5发布,服务器性能优化升级

    O2OA此次发布的移动端H5版本,拥有高度的灵活性.强大的交互功能.丰富的适配平台,同时拥有齐全的页面组件,功能组合极其便利.客户在使用移动端H5进行办公时,能够更高效地实现动态信息确认.助力企业协同 ...

  6. 京东前端:三级列表页持续架构优化

    为什么80%的码农都做不了架构师?>>>    王向维,京东商城三级列表页架构师.工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前 ...

  7. 京东三级列表页持续架构优化

    本文作者,王向维,京东商城三级列表页架构师.工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前端即服务器端做了大量的优化工作. 京东三级列表页 三级列 ...

  8. 这份内部800页MySQL性能优化法则笔记,好好学习,天天向上

    前言 性能优化的问题是--个并行的问题,归根结底是锁和资源争用的问题.举个例子:假设你要开-一个餐饮店,你需要取好店名,到工商局领取开业登记注册证书,到卫生防疫站申请卫生许可,到物价局进行物价审核,如 ...

  9. 800页MySQL性能优化法则笔记分享,急速提升刻不容缓

    开篇必水 从计算机出现的第一天起,性能作为鞭策者就不断地促进计算机及系统的演进.从最开始的人工输入命令等待计算机执行,到利用批处理任务提升利用率,再到通过多进程和多线程并发来进一步提升效率,性能其实一 ...

最新文章

  1. CVPR 2021 | 针对全局 SfM 的高效初始位姿图生成
  2. 盘点 | 近期活动信息都在这里啦~
  3. oracle和mysql存储汉字_mysql和oracle的一个汉字占几个字节
  4. 海报推广神器:活码加多级加密跳转防封双重保护
  5. php性能提升5倍的秘诀,停机维护时长缩短5倍,全靠这3个秘诀
  6. QML中的JavaScript表达式
  7. 7-16 一元多项式求导 (20 分)(详解+题目分析)
  8. 【dfs】拔河比赛(ybtoj dfs-1-1)
  9. java enummap_Java EnumMap containsValue()方法与示例
  10. haproxy keepalived_Haproxy+KeepAlived+Mycat实现高可用集群
  11. Ubuntu 配置 Tomcat
  12. 从零开始的Python学习Episode 20——面向对象(3)
  13. 今天有人问,为何汝粉丝这么少?
  14. AutoHotKey完成ass字幕文件字幕偏移时间修改
  15. Power bi 3.2 堆积柱形图
  16. linux系统安装pidgin,linux下QQ的安装(pidgin的安装)
  17. rpgmvp文件转换图片_干货|如何快速将图片转换成CAD文件格式
  18. python情人节之玫瑰花与表白方式,用python画一朵玫瑰花,拿去表白趴
  19. linux_sw_64,Zabbix使用system.sw.os获取主机信息
  20. 第二章.Java程序设计基础

热门文章

  1. c#接口和抽象类对比学习
  2. tensorflow 代码阅读
  3. 局域网语音通话demo
  4. HW2017笔试编程题
  5. HashMap中的hash函数
  6. FMPEG结构体分析:AVStream
  7. 大道至简:软件工程实践者的思想——第七、八章感想
  8. href=#与href=javascriptvoid(0)的区别
  9. Windows 7搜索功能讲解
  10. Class.newInstance()与new、Constructor.newInstance()的区别