比較xib和QuickVFL的布局方式

在非代碼的布局方式里,xib和QuickVFL都是非常好用的方式栏渺。本篇文章就是為了比較這兩種布局方式在性能上的差異呛梆。

比較方式

方式就是相對同一個控件,通過重復完全創(chuàng)建&填充控件內容&展開布局磕诊,然后查看它們在期間的性能數(shù)據(jù)填物。

對比的控件

我使用的是攜程的旅行日程里的卡片控件纹腌。截圖如下:


攜程旅行日程的卡片控件

控件的簡單說明為:

標題最多兩行,高度自適應

副標題最多三行滞磺,高度自適應升薯。

文章出處在左邊底下

圖片在右邊。圖片和內容的比例固定击困。我取他是內容的寬度的0.8倍

圖片的高度為其寬度的0.6倍

閱讀數(shù)在圖片底下涎劈。當閱讀數(shù)小于100時,不展示閱讀數(shù)阅茶。

左邊的內容和右邊的圖片蛛枚,誰的高度高就誰來撐起控件的高度

QuickVFL實現(xiàn)的控件(TravelCardVFL)

配置部分

簡書的代碼編輯實在有點弱,我就上截圖吧:


TravelCardVFL的配置

頭文件部分


TravelCardVFL的頭文件

m文件部分


TravelCardVFL的m文件

從代碼上來看脸哀,布局的代碼基本為零蹦浦。

xib實現(xiàn)的控件

xib布局文件內容


TravelCardXIB的布局

布局的時候,已經盡可能使得結構合理撞蜂、簡單盲镶。但花了相當長的時間。要不斷地人肉check約束蝌诡。過程中還重新來了2次徒河。嗯,估計是我不熟吧……

頭文件內容


TravelCardXIB的頭文件內容

相比之前送漠,只是添加了一個實例化的類方法

m文件內容


TravelCardXIB的m文件內容

相比上一個m文件,添加的內容只是實例化函數(shù)由蘑。這文件內的布局代碼也基本為0闽寡。

測試運行

運行環(huán)境

ipad mini,iOS版本8.0.2

運行截圖


開始測試之前的運行界面

底下的控件尼酿,就是正確展示的樣子爷狈。用于比較效果。上面的灰色區(qū)域是實時測試的控件的粘貼區(qū)域裳擎。

測試運行的代碼

運行QuickVFL測試的代碼


運行xib測試的代碼

重點說明:

重復創(chuàng)建1000次

在主線程測試

填充控件的圖片和文字數(shù)據(jù)事先緩沖好了涎永,所以運行時間沒有干擾

控件被創(chuàng)建出來后,直接對frame大小進行賦值鹿响,然后填充羡微、展開,并被添加到super view里惶我。這期間的時間都會被累計起來妈倔。

為了不讓VC的布局影響到結果,viewPlaceHolder已經提前給了一個固定大小绸贡。

其實這里盯蝴,要不要把它加到super view里毅哗,并不影響測試結果,因為主要的布局過程(創(chuàng)建捧挺、填充數(shù)據(jù)后虑绵,layoutIfNeeded)會占據(jù)絕大部分。

最終運行結果

QuickVFL:1000次闽烙,用了10.36秒

XIB:1000次翅睛,用了14.13秒

每次運行會有些許不一樣,但差別不大鸣峭『晁總體上來說,大概QuickVFL會比xib的快20%左右摊溶。在內存的使用上爬骤,基本一致(后來使用一個列表把創(chuàng)建出來的卡片囤起來,發(fā)現(xiàn)內存使用上沒兩者并沒有太大差別)莫换。

結論

使用QuickVFL進行布局霞玄,只要你對VFL熟悉,你會發(fā)現(xiàn)比xib愉快的多拉岁,過程也可控得多坷剧。運行速度上,也是一個大大的PLUS喊暖!

更多比較

其實我非常想拿mansory寫一個同樣的控件惫企,然后進行比較。但看了一下mansory的文檔陵叽,太繁瑣了狞尔。希望哪位兄弟看了這篇文章后,能幫忙寫一個巩掺,然后我們將會得到一個更加全面的比較結果偏序。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市胖替,隨后出現(xiàn)的幾起案子研儒,更是在濱河造成了極大的恐慌,老刑警劉巖独令,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件端朵,死亡現(xiàn)場離奇詭異,居然都是意外死亡燃箭,警方通過查閱死者的電腦和手機逸月,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來遍膜,“玉大人碗硬,你說我怎么就攤上這事瓤湘。” “怎么了恩尾?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵弛说,是天一觀的道長。 經常有香客問我翰意,道長木人,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任冀偶,我火速辦了婚禮醒第,結果婚禮上,老公的妹妹穿的比我還像新娘进鸠。我一直安慰自己稠曼,他們只是感情好,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布客年。 她就那樣靜靜地躺著霞幅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪量瓜。 梳的紋絲不亂的頭發(fā)上司恳,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機與錄音绍傲,去河邊找鬼扔傅。 笑死,一個胖子當著我的面吹牛烫饼,可吹牛的內容都是我干的铅鲤。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼枫弟,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鹏往?” 一聲冷哼從身側響起淡诗,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎伊履,沒想到半個月后韩容,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡唐瀑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年群凶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哄辣。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡请梢,死狀恐怖赠尾,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情毅弧,我是刑警寧澤气嫁,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站够坐,受9級特大地震影響寸宵,放射性物質發(fā)生泄漏。R本人自食惡果不足惜元咙,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一梯影、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧庶香,春花似錦甲棍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至倘零,卻和暖如春唱遭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呈驶。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工拷泽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人袖瞻。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓司致,卻偏偏與公主長得像,于是被迫代替她去往敵國和親聋迎。 傳聞我的和親對象是個殘疾皇子脂矫,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,519評論 25 707
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件霉晕、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,029評論 4 62
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程庭再,因...
    小菜c閱讀 6,358評論 0 17
  • 南有喬木,不可休思牺堰。 我寫下這句子 最想的就是你拄轻。 你不知道 我最清淺的念想, 不過是和你一起仰望天堂伟葫。 老舍有本...
    RebornF閱讀 159評論 5 1
  • 寒極枯吟久恨搓,春微美夢酣。 一窗晴色好,勤蒔報挼藍斧抱。
    德惠陳旭閱讀 338評論 0 1