0. 前言
TableView 的優(yōu)化是一個老生常談的問題润梯,無論是自己平常使用,還是面試筆試的時(shí)候威彰,它都會無時(shí)不刻地出現(xiàn)。TableView 需要優(yōu)化的問題主要有這幾個:
-
列表巨長
一般我們的 TableView 都會展示比較多的數(shù)據(jù)穴肘,尤其是請求網(wǎng)絡(luò)的時(shí)候歇盼,都是嘩啦啦的一個大列表。 -
圖片巨多
如果是嘩啦啦的大列表评抚,每一個 cell 都帶圖片的話豹缀,幀率咔咔地往下掉... -
圓角巨多
嘩啦啦的大列表,加上圖片慨代,然后圖片還得要是個圓形... 完了以后就是一堆圓角矩形的 label ... -
高度巨亂
萬一你的 TableView 每一個 cell 的高度還都不一樣...
這個筆記就當(dāng)作是一個小總結(jié)邢笙,把上面這幾個問題給小小地解決一下她肯。今天先把思路寫出來挡毅,挖好坑再填 Demo 和代碼... 就是這么懶...
1. 列表巨長
不管是剁手寶的搜索列表,還是知乎的主頁流花颗,都是需要展示非常長的列表丈积。如果一下子全部加載進(jìn)來筐骇,就算只有文字,界面也會卡住江滨。萬一網(wǎng)絡(luò)環(huán)境再差一點(diǎn)铛纬,整個體驗(yàn)就爛到爆。所以一般在處理 TableView 的時(shí)候唬滑,都會先考慮 上拉加載告唆。
上拉加載有兩種實(shí)現(xiàn)的思路棺弊,一種是上拉到 列表底部 然后通過動畫告知用戶正在加載,一種是上拉到 靠近列表底部的某一個位置 然后預(yù)加載擒悬。第一種思路本身沒有什么問題模她,但是如果列表真的很長,那用戶就會看到很多次加載動畫懂牧,會造成一點(diǎn)體驗(yàn)的割裂感侈净,我自己不是很喜歡。第二種思路能夠給用戶一種比較順暢的感覺僧凤,但是當(dāng)用戶滑動太快或者網(wǎng)絡(luò)不是很好的時(shí)候畜侦,有可能預(yù)加載還沒完成就滑到底了... 所以這個時(shí)候最好是也加上一個加載動畫,以免造成用戶的體驗(yàn)困惑躯保。
如果想采用第一種思路但是自己又懶得寫的話旋膳,可以用 ESPullToRefresh 來實(shí)現(xiàn),這是一個很棒的框架途事。ESPullToRefresh 的 GitHub 傳送門
2. 圖片巨多
TableView 的圖片是一個逃不掉的話題验懊。如果每一個 cell 都包含了一張圖片,而且是實(shí)時(shí)加載的話尸变,TableView 的滑動很大可能會掉幀义图。
所以聰明的人類想出了一個解決辦法——忽略加載。就是說滑動的時(shí)候那些新來的圖片我就不加載振惰,等到你停住了不滑動了歌溉,我再加載出來給你看。這個解決的思路尤其在快速滑動的時(shí)候非常好骑晶,因?yàn)槿绻脩羰强焖倩瑒拥脑挘且馕吨艽蟪潭壬蠈@些滑過去的內(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 的行高就不得不計(jì)算际起。不定行高也是 TableView 優(yōu)化不能不解決的問題。解決的辦法就是——緩存吐葱。
5. 小結(jié)
TableView 是一個特別可恨的東西... 因?yàn)楫吘谷澜缍荚跒樗倪@些使用場景做優(yōu)化加叁,非常期待水果在某一天能夠給出一個官方的解決方案或者直接寫好方法(沒錯就是這么懶)...
還有一個非常重要的點(diǎn),一定要根據(jù)情況來定制具體方案唇撬。
如果 TableView 不長那么分頁加載來干什么...
如果圓角不多它匕,只是掉個一兩幀那有什么好優(yōu)化的...
作為一個程序員,一定要... 懶... [手動狗頭] [手動狗頭] [手動狗頭]