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 ...
随机推荐
- github如何上传代码
别人写的太好了,没必要重写.备份给自己参看. 1.https://www.cnblogs.com/zlxbky/p/7727895.html 2.https://blog.csdn.net/pql92 ...
- Java集合类总结 (四)
PriorityQueue类 优先队列不管你按照什么顺序插入元素,出队列的时候元素都是按顺序输出的.也就是每次调用remove的时候,都返回当前队列中最小的元素.然后队列中的元素不是维持排序状态的,如 ...
- android 百度天气接口
百度天气接口 之前有篇随笔是说中国气象的天气接口的,但那个接口不是很稳定,用一段时间过后就会获取不到数据了. 随笔地址:http://www.cnblogs.com/liangstudyhome/p/ ...
- IPMITOOL命令支持列表V2.0
命令集 命令行格式 命令行说明 User ipmitool -H <IP地址> -I lanplus -U <用户名> -P <密码> user summary 查 ...
- 动态往 datagridview 追加行、列操作
DataGridViewTextBoxColumn acCode = new DataGridViewTextBoxColumn(); acCode.Name = "acCode" ...
- spring 学习(三):aop 学习
spring 学习(三):aop 学习 aop 概念 1 aop:面向切面(方面)编程,扩展功能不修改源代码实现 2 AOP采取横向抽取机制,取代了传统纵向继承体系重复性代码 3 aop底层使用动态代 ...
- luoguP4172 [WC2006]水管局长
https://www.luogu.org/problemnew/show/P4172 考虑倒序处理所有操作 先把不会被删掉的边加入图中,LCT 维护最小生成树,再倒序插入每一条边,如果边的 ( l, ...
- DOM操作技术之动态脚本与动态样式(兼容版)
动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...
- 2. C/C++笔试面试经典题目二
1. C和C++中struct有什么区别? [参考答案] [解析]C中的struct没有保护行为,没有public,private,protected,内部不能有函数,但可以有函数指针. 2. C++ ...
- SDUT OJ 数据结构实验之二叉树四:(先序中序)还原二叉树
数据结构实验之二叉树四:(先序中序)还原二叉树 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...