TableView 优化笔记

0. 前言

TableView 的优化是一个老生常谈的问题，无论是自己平常使用，还是面试笔试的时候，它都会无时不刻地出现。TableView 需要优化的问题主要有这几个：

• 列表巨长
  一般我们的 TableView 都会展示比较多的数据，尤其是请求网络的时候，都是哗啦啦的一个大列表。
• 图片巨多
  如果是哗啦啦的大列表，每一个 cell 都带图片的话，帧率咔咔地往下掉...
• 圆角巨多
  哗啦啦的大列表，加上图片，然后图片还得要是个圆形... 完了以后就是一堆圆角矩形的 label ...
• 高度巨乱
  万一你的 TableView 每一个 cell 的高度还都不一样...

这个笔记就当作是一个小总结，把上面这几个问题给小小地解决一下。今天先把思路写出来，挖好坑再填 Demo 和代码... 就是这么懒...

---

1. 列表巨长

不管是剁手宝的搜索列表，还是知乎的主页流，都是需要展示非常长的列表。如果一下子全部加载进来，就算只有文字，界面也会卡住。万一网络环境再差一点，整个体验就烂到爆。所以一般在处理 TableView 的时候，都会先考虑 上拉加载。

上拉加载有两种实现的思路，一种是上拉到 列表底部 然后通过动画告知用户正在加载，一种是上拉到 靠近列表底部的某一个位置 然后预加载。第一种思路本身没有什么问题，但是如果列表真的很长，那用户就会看到很多次加载动画，会造成一点体验的割裂感，我自己不是很喜欢。第二种思路能够给用户一种比较顺畅的感觉，但是当用户滑动太快或者网络不是很好的时候，有可能预加载还没完成就滑到底了... 所以这个时候最好是也加上一个加载动画，以免造成用户的体验困惑。

如果想采用第一种思路但是自己又懒得写的话，可以用 ESPullToRefresh 来实现，这是一个很棒的框架。ESPullToRefresh 的 GitHub 传送门

---

2. 图片巨多

TableView 的图片是一个逃不掉的话题。如果每一个 cell 都包含了一张图片，而且是实时加载的话，TableView 的滑动很大可能会掉帧。

所以聪明的人类想出了一个解决办法——忽略加载。就是说滑动的时候那些新来的图片我就不加载，等到你停住了不滑动了，我再加载出来给你看。这个解决的思路尤其在快速滑动的时候非常好，因为如果用户是快速滑动的话，那意味着他很大程度上对这些滑过去的内容是不感兴趣的，他需要的是更下面的内容。

---

3. 圆角巨多

圆角得分两种情况来说，一种是 UIView 的圆角，一种是 UIImageView/UILabel 的圆角。两种圆角的区别在于，如果用最原生的方式 cornerRadius 设置圆角半径的话，UIImageView 和 UILabel 是需要用 maskToBounds() 方法来给它们上遮罩的，但是 UIView 不需要。也就是说，如果你是需要给 UIView 画圆角那就直接设置 cornerRadius 好了，这个不会造成什么卡顿。

而针对 UIImageView 和 UILabel，聪明的人类又想出了一个特别作弊的办法——圆角图片。就是直接画一张带圆角的中间镂空的图片给你叠上去... 简直就是作弊... 可能有人会说，固定大小的是可以，那如果是长度不同的 UILabel 怎么办咧。方法就是，你就左右各一张嘛... (逃...)

---

4. 高度巨乱

像朋友圈这样，cell 的行高是跟每个用户发布的内容有关系，所以每个 cell 的行高就不得不计算。不定行高也是 TableView 优化不能不解决的问题。解决的办法就是——缓存。

---

5. 小结

TableView 是一个特别可恨的东西... 因为毕竟全世界都在为它的这些使用场景做优化，非常期待水果在某一天能够给出一个官方的解决方案或者直接写好方法(没错就是这么懒)...

还有一个非常重要的点，一定要根据情况来定制具体方案。
如果 TableView 不长那么分页加载来干什么...
如果圆角不多，只是掉个一两帧那有什么好优化的...

作为一个程序员，一定要... 懒... [手动狗头] [手动狗头] [手动狗头]