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")
h5列表页的性能优化的更多相关文章
- 移动端h5列表页上拉加载更多
背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...
- dede列表页分页地址优化(不同url相同内容问题解决)<转自http://www.966266.com>
<注明,完全转自http://www.966266.com/seoblog/?p=75> 存在问题 DEDE默认分类分页地址存在不同URL相同内容问题,导致内容重复,对SEO非常不利.情况 ...
- h5移动端前端性能优化
1.脚本优化 (1)减少重绘和回流 (2)缓存Dom选择与计算 (3)缓存列表length (4)尽量使用事件代码,避免批量绑定事件 (5)尽量使用ID选择器 (6)使用touchstart.touc ...
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- [转] 钉钉的H5性能优化方案
对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环.原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性. 用户感受 当用户能 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...
- 移动 H5(PC Web)前端性能优化指南
原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...
随机推荐
- 11.BETWEEN 操作符
BETWEEN 操作符在 WHERE 子句中使用,作用是选取介于两个值之间的数据范围. BETWEEN 操作符 操作符 BETWEEN ... AND 会选取介于两个值之间的数据范围.这些值可以是数值 ...
- React项目中的registerServiceWorker的作用
在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...
- Python开发 第一篇 python的前世今生
Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- 20169219 实验四Android程序设计
一.实现Linux下dc的功能,计算后缀表达式的值 public int evaluate(String expr) { int op1, op2, result = 0; String token; ...
- CSVHelper 导出CSV 格式
public class CSVHelper { System.Windows.Forms.SaveFileDialog saveFileDialog1;//保存 private string hea ...
- 转:[python] pip 升级所有的包
pip 当前内建命令并不支持升级所有已安装的Python模块. 列出当前安装的包: pip list 列出可升级的包: pip list --outdate 升级一个包: pip install -- ...
- Ext.Net安装和应用
1.最新版本 2.打开文件,将包含以下文件: Ext.Net.dll Ext.Net.Utilities.dll Ext.Net.xml Newtonsoft.Json.dll Newto ...
- whisper简介
以太坊系列之二十 以太坊中的基础应用whisper 以太坊系列之二十 以太坊中的基础应用whisper 1 whisper介绍 2 whisper rpc模块 3 whisper中的消息 4 消息的加 ...
- Linux 运维工程师经典面试题合集(不断更新中 ...)
写在前面的话 做运维以来,关注了很多关于互联网技术,培训等乱七八糟的公众号,时不时的就会推一些各种公司的面试题过来. 大致看了一下,发现自己很多知识要么遗忘了,要么很难说出个所以然,所以这里对那些个人 ...
- 第一篇 Python的数据类型
Python的标准数据类型有五种: (1)字符串 (2)数字(包括整数,浮点数,布尔,复数) (3)列表(list) (4)元组(tuple) (5)字典(dict) 注:使用type函数可以查看对象 ...