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 ...
随机推荐
- Ubuntu 14.04 安装配置强大的星际译王(stardict)词典
转载http://blog.csdn.net/huyisu/article/details/53437931
- 浅析C语言中assert的用法(转)
原文地址:http://www.jb51.net/article/39685.htm 以下是对C语言中assert的使用方法进行了介绍,需要的朋友可以参考下. assert宏的原型定义在<ass ...
- css总结15:CSS3 圆角
1 css圆角: 1.1 浏览器支持:-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本. 1.2 属性 border-radius: 代码如下: #rcorners1 { bor ...
- 编写高质量代码改善C#程序的157个建议——建议42:使用泛型参数兼容泛型接口的不可变性
建议42:使用泛型参数兼容泛型接口的不可变性 让返回值类型返回比声明的类型派生程度更大的类型,就是“协变”.如: public Employee GetAEmployee(string name) { ...
- 编写高质量代码改善C#程序的157个建议——建议38:小心闭包中的陷阱
建议38:小心闭包中的陷阱 先看一下下面的代码,设想一下输出的是什么? static void Main(string[] args) { List<Action> lists = new ...
- java -version javac -version 版本不一致
系统先装了jdk1.8 ,环境变量里配置的是jdk1.8,java -version 与javac -version 版本一致. 然后安装了jdk1.7 ,环境变量java_home 改成了1.7,但 ...
- C# ADO.NET+反射读取数据库并转换为List
public List<T> QueryByADO<T>(string connStr, string sql) where T : class, new() { using ...
- 有大佬拉我一把麽,现在广州还有c++后台实习招聘麽
有大佬拉我一把麽,现在广州还有c++后台实习招聘麽
- c++缓冲区------c++ Primer Plus
通常,通过使用缓冲区可以更高效地处理输入和输出.缓冲区是用作中介的内存块,它是将信息从设备传输到程序或从程序传输给设备的临时存储工具.通常,像硬盘驱动器这样的设备以512字节(或更多)的块为单位来传输 ...
- LoadRunner--获取请求的返回结果函数
注:内容来自网络 Action(){ web_set_max_html_param_len("262144"); // 默认最大长度为256 web_reg_save_param( ...