TableView 優(yōu)化筆記

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)化的...

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末窖认,一起剝皮案震驚了整個濱河市豫柬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌扑浸,老刑警劉巖烧给,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異喝噪,居然都是意外死亡础嫡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門酝惧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來榴鼎,“玉大人,你說我怎么就攤上這事晚唇∥撞疲” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵哩陕,是天一觀的道長平项。 經(jīng)常有香客問我,道長悍及,這世上最難降的妖魔是什么闽瓢? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮心赶,結(jié)果婚禮上扣讼,老公的妹妹穿的比我還像新娘。我一直安慰自己园担,他們只是感情好届谈,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布枯夜。 她就那樣靜靜地躺著,像睡著了一般艰山。 火紅的嫁衣襯著肌膚如雪湖雹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天曙搬,我揣著相機(jī)與錄音摔吏,去河邊找鬼。 笑死纵装,一個胖子當(dāng)著我的面吹牛征讲,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播橡娄,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼诗箍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了挽唉?” 一聲冷哼從身側(cè)響起滤祖,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瓶籽,沒想到半個月后匠童,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡塑顺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年汤求,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片严拒。...
    茶點(diǎn)故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡扬绪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糙俗,到底是詐尸還是另有隱情勒奇,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布巧骚,位于F島的核電站,受9級特大地震影響格二,放射性物質(zhì)發(fā)生泄漏劈彪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一顶猜、第九天 我趴在偏房一處隱蔽的房頂上張望沧奴。 院中可真熱鬧,春花似錦长窄、人聲如沸滔吠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疮绷。三九已至翰舌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間冬骚,已是汗流浹背椅贱。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留只冻,地道東北人庇麦。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像喜德,于是被迫代替她去往敵國和親山橄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

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