UITableview优化随笔(1)-提高加载更多内容时的效率
UITableView上拉加载更多的功能相信很多应用都会用到,类似朋友圈、微博这样的应用,tableView中的数据内容高度根据内容来变化,同时需要加载大量的数据(上拉加载更多),要怎样才能保证加载数据时的页面流畅呢?
UITableView的原理和使用,以及其滚动帧率的优化,不是本篇blog要讨论的问题,这个在网上能搜到大量资料,这里不再赘述。
一般在实现上拉加载更多数据的实现思路是:
1.获取新的数据
2.在当前dataArray中添加这些数据
3.在tableView上显示这些数据
其中第三步,可以通过insertRowsAtIndexPaths::或者reloadData这两种方式实现。
这里讨论使用reloadData的这种情况:
我们知道UITableView在滚动时会不断地调用
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath;
这两个方法,因此,要保证列表滚动的流畅性,最重要的就是优化这两个方法中的代码,保证代码的执行时间短。
而在加载更多数据时,在主动执行reloadData方法后,系统会重新计算一次所有cell的高度,也就是会根据cell数量在调用N次heightForRowAtIndexPath方法,当tableView中的数据较少,还可以接受,而当页面上数据加载较多时,即使heightForRowAtIndexPath方法执行效率再高,也无法避免出现UI卡顿的情况。
那么怎么办呢?
很简单,我们可以把cell的高度缓存下来在需要使用的时候取出,下面是实现的思路:
首先定义存储cell高度的模型,我们这里使用NSMutableDictionary,为什么不用NSMutableArray来做呢?稍后再说这个问题
NSMutableDictionary* _cellHeightDictionary;
接着在heightForRowAtIndexPath中:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{ CGFloat cellHeight;
NSNumber* cellHeightNumber = [_cellHeightDictionary objectForKey:@(indexPath.row)];
if (cellHeightNumber) {//判断是否缓存了该cell的高度
cellHeight = [cellHeightNumber floatValue];
}else
{
cellHeight = [CustemCell cellHeightWithModel:_modelArray[indexPath.row]];//通过类方法获取cell高度
[_cellHeightDictionary setObject:@(cellHeight) forKey:@(indexPath.row)];//以indexPath为key存储cell高度
}
return cellHeight;
}
最后别忘了在重新刷新数据的时候清空cell高度的缓存。
这样修改完之后,不论页面加载了多少数据,每个cell的高度只需要计算一次,优化的目的也就达到了。
最后说一下为什么用NSMutableDictionary而不用NSMutableArray来存储cell height:
因为系统在调用heightForRowAtIndexPath是无序的,如果用数组来存数height,会导致高度错位和其他莫名其妙的问题,所以这里一定不能用数组来缓存高度。
UITableview优化随笔(1)-提高加载更多内容时的效率的更多相关文章
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- PHP+Ajax点击加载更多内容
css样式: <style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px soli ...
- jquery制作图片瀑布流点击按钮加载更多内容
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> ...
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
- 实现Android ListView 自动加载更多内容
研究了几个小时终于实现了Android ListView 自动加载的效果. 说说我是怎样实现的.分享给大家. 1.给ListView增加一个FooterView,调用addFooterView(foo ...
- Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页
1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
随机推荐
- POJ 2299 Ultra-QuickSort(树状数组+离散化)
http://poj.org/problem?id=2299 题意:给出一组数,求逆序对. 思路: 这道题可以用树状数组解决,但是在此之前,需要对数据进行一下预处理. 这道题目的数据可以大到999,9 ...
- Python基础笔记系列十一:标准输入输出、文件读写和指针等操作
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 标准输入输出一.输入 在sublime中这个时候需要安装SublimeRE ...
- vue-cli router的使用
用了很久这个vue-cli到现在连入门都算不了,为了防止忘记还是很有必要记一下随笔的. 关于vue-cli中的router的使用,, 我将所有页面都存放在components文件夹下, 灰后通过rou ...
- javascript 关于节点
重复使用对像可以用 var a,b; with(document){ a = getElementById('aID') b = getElementById('bID') } 关于节点访问: par ...
- 高质量的C++博客
陈硕 :http://blog.csdn.net/Solstice 孟岩: http://blog.csdn.net/myan
- JavaScript内部原理系列-执行上下文(Execution Context)
概要 本文将向大家介绍ECMAScript的执行上下文以及相关的可执行代码类型. 定义 每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文.执行上下文(简称:EC)是个抽 ...
- Android6.0------权限申请管理(单个权限和多个权限申请)
Android开发时,到6.0系统上之后,有的权限就得申请才能用了. Android将权限分为正常权限 和 危险权限 Android系统权限分为几个保护级别.需要了解的两个最重要保护级别是 正常权限 ...
- nyoj1015——二分图染色
二部图 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 二部图又叫二分图,我们不是求它的二分图最大匹配,也不是完美匹配,也不是多重匹配,而是证明一个图是不是二部图.证 ...
- Python不同版本切换
2016年6月8日更新: 这是我早前写的一篇小文章,其实,后来也没有采用这种方法切换.电脑上安装了多个Python 版本,保证自己经常用的版本加入环境变量外,使用非系统的版本时一般使用 IDE 编辑器 ...
- jquery下跨域请求之代码示例
场景描述: 在域A下异步获取B域下的接口: 实现方法: $.ajax({ url : (Q.lottery.serverTimeUrl || 'about:blank'), error : funct ...