TableView 優(yōu)化筆記

0. 前言

TableView 的優(yōu)化是一個老生常談的問題,無論是自己平常使用,還是面試筆試的時候,它都會無時不刻地出現(xiàn)。TableView 需要優(yōu)化的問題主要有這幾個:

  • 列表巨長
    一般我們的 TableView 都會展示比較多的數(shù)據(jù),尤其是請求網(wǎng)絡(luò)的時候,都是嘩啦啦的一個大列表。
  • 圖片巨多
    如果是嘩啦啦的大列表,每一個 cell 都帶圖片的話,幀率咔咔地往下掉...
  • 圓角巨多
    嘩啦啦的大列表,加上圖片,然后圖片還得要是個圓形... 完了以后就是一堆圓角矩形的 label ...
  • 高度巨亂
    萬一你的 TableView 每一個 cell 的高度還都不一樣...

這個筆記就當(dāng)作是一個小總結(jié),把上面這幾個問題給小小地解決一下。今天先把思路寫出來,挖好坑再填 Demo 和代碼... 就是這么懶...


1. 列表巨長

不管是剁手寶的搜索列表,還是知乎的主頁流,都是需要展示非常長的列表。如果一下子全部加載進(jìn)來,就算只有文字,界面也會卡住。萬一網(wǎng)絡(luò)環(huán)境再差一點,整個體驗就爛到爆。所以一般在處理 TableView 的時候,都會先考慮 上拉加載。

上拉加載有兩種實現(xiàn)的思路,一種是上拉到 列表底部 然后通過動畫告知用戶正在加載,一種是上拉到 靠近列表底部的某一個位置 然后預(yù)加載。第一種思路本身沒有什么問題,但是如果列表真的很長,那用戶就會看到很多次加載動畫,會造成一點體驗的割裂感,我自己不是很喜歡。第二種思路能夠給用戶一種比較順暢的感覺,但是當(dāng)用戶滑動太快或者網(wǎng)絡(luò)不是很好的時候,有可能預(yù)加載還沒完成就滑到底了... 所以這個時候最好是也加上一個加載動畫,以免造成用戶的體驗困惑。

如果想采用第一種思路但是自己又懶得寫的話,可以用 ESPullToRefresh 來實現(xiàn),這是一個很棒的框架。ESPullToRefresh 的 GitHub 傳送門


2. 圖片巨多

TableView 的圖片是一個逃不掉的話題。如果每一個 cell 都包含了一張圖片,而且是實時加載的話,TableView 的滑動很大可能會掉幀。

所以聰明的人類想出了一個解決辦法——忽略加載。就是說滑動的時候那些新來的圖片我就不加載,等到你停住了不滑動了,我再加載出來給你看。這個解決的思路尤其在快速滑動的時候非常好,因為如果用戶是快速滑動的話,那意味著他很大程度上對這些滑過去的內(nèi)容是不感興趣的,他需要的是更下面的內(nèi)容。


3. 圓角巨多

圓角得分兩種情況來說,一種是 UIView 的圓角,一種是 UIImageView/UILabel 的圓角。兩種圓角的區(qū)別在于,如果用最原生的方式 cornerRadius 設(shè)置圓角半徑的話,UIImageView 和 UILabel 是需要用 maskToBounds() 方法來給它們上遮罩的,但是 UIView 不需要。也就是說,如果你是需要給 UIView 畫圓角那就直接設(shè)置 cornerRadius 好了,這個不會造成什么卡頓。

而針對 UIImageView 和 UILabel,聰明的人類又想出了一個特別作弊的辦法——圓角圖片。就是直接畫一張帶圓角的中間鏤空的圖片給你疊上去... 簡直就是作弊... 可能有人會說,固定大小的是可以,那如果是長度不同的 UILabel 怎么辦咧。方法就是,你就左右各一張嘛... (逃...)


4. 高度巨亂

像朋友圈這樣,cell 的行高是跟每個用戶發(fā)布的內(nèi)容有關(guān)系,所以每個 cell 的行高就不得不計算。不定行高也是 TableView 優(yōu)化不能不解決的問題。解決的辦法就是——緩存。


5. 小結(jié)

TableView 是一個特別可恨的東西... 因為畢竟全世界都在為它的這些使用場景做優(yōu)化,非常期待水果在某一天能夠給出一個官方的解決方案或者直接寫好方法(沒錯就是這么懶)...

還有一個非常重要的點,一定要根據(jù)情況來定制具體方案。
如果 TableView 不長那么分頁加載來干什么...
如果圓角不多,只是掉個一兩幀那有什么好優(yōu)化的...

作為一個程序員,一定要... 懶... [手動狗頭] [手動狗頭] [手動狗頭]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,422評論 4 61
  • 楊先生去遙遠(yuǎn)的地方和錢先生及他們的女兒相聚,共聚《我們仨》了,先生一路走好! 僅以先生語錄勉勵自我。 這讓我想到“...
    小青l(xiāng)ove閱讀 343評論 0 0
  • 昨天寫排序算法的時候遇到一個問題:將交換兩個數(shù)的幾句代碼定義成一個靜態(tài)方法,需要交換數(shù)字的時候調(diào)用這個方法,結(jié)果排...
    buyaole閱讀 612評論 1 0
  • 我不知道我需要通過什么方式來保留記憶嗎?記日記?寫幾天就沒什么寫了。難道我期待有一天翻出來看到的驚喜?以前的許多事...
    bingo_wonder閱讀 421評論 0 0
  • 現(xiàn)在是十點57分 我喜歡的人睡著了吧,能有個好夢吧。晚安,我的鐵馬,我的冰河 今天我在后操場抱著你,風(fēng)挺大,可是,...
    小凡日記閱讀 340評論 0 0

友情鏈接更多精彩內(nèi)容