新浪微博iOS客戶端架構與優化之路

新浪微博iOS客戶端架構與優化之路

 

隨着Facebook、Twitter、微博的崛起，向UGC、PGC、OGC，自媒體提供平臺的內 容消費型App逐漸造成了獨特的客戶端架構模式。與電商和通信工具類App不一樣，微博客戶端具備多信息流、內容豐富多樣、對數據量和延遲敏感等特色。微博的信息流承載着文字、網頁、照片、視頻、直播等多樣的內容形式，因此複雜信息流對團隊的開發效率、App的性能都帶來了極大的挑戰。

2016年6月24-25日，GMTC全球移動技術大會將在北京舉行。本屆大會，咱們邀請到了新浪微博移動端資深研發專家邱晨老師。曾就任於Facebook、Storm八、Twitter的邱晨老師，將在大會上分享《微博複雜信息流的架構之道》，與你們分享如何應對複雜信息流所帶來的挑戰。藉着此次大會的機會，咱們採訪了邱晨老師，瞭解新浪微博客戶端的架構與優化經驗。

嘉賓介紹

邱晨，微博移動端資深研發專家

曾就任於Facebook, Storm8, Twitter，以全棧工程師的身份參與開發過多款App，對產品有着執着的熱情。如今主要負責客戶端流程優化、持續集成和一些重構的工做。

 

邱老師您好，您就任的公司包括Facebook、Twitter、微博，可否介紹一下它們的研發團隊風格各有什麼特色？

邱晨： Facebook是一傢俱備Hack精神的公司，工程師對產品有不少本身的見解。在Hack Week的時候，你們會把本身的idea實現出來進行評審，評審出好的idea會正式上線。「Move Fast & Break Things」這個FB的座右銘體現了它大膽嘗試的工程師文化。

Twitter的風格是對技術追求極致，同時鼓勵大膽的交流。你們會很樂於分享和學習新的技術，保持對技術的好奇心。Twitter有個項目叫Twitter University，每週都會推出課程，每一個人均可以註冊參加，同時也能夠註冊成爲講師，與你們分享。在Twitter，你們很注重代碼質量和集成測試，儘可能將Bug扼殺在開發階段。

微博的研發團隊對技術頗有熱情，常常會與國內外的技術專家進行技術交流，而且在不斷地改進自身的架構和學習新的技術。經過本身的實踐來找到最好且最適合的解決方案。我所在的移動研發中心，一直在不斷地嘗試引入新的技術，例如ComponentKit，React Native，Hybrid App等。工程師之間的交流方式也是簡單直接，這點跟Twitter有些像，儘可能減小溝通成本，快速解決問題。

可否簡單介紹一下微博iOS端框架，由哪些部分組成？

邱晨：微博iOS端主要由微博核心源碼、第三方團隊SDK和開源SDK組成。在業務層，每條業務線都有本身的一個或者幾個模塊，這樣保證了多條業務線的並行開發。在Code Base以外，咱們還有Gerrit代碼審查，AB Test系統，打包平臺，聯調環境，Jeckins自動化集成等系統來輔助整個App開發流程。

微博iOS端架構模式是怎樣的，在Controller優化上作了哪些工做？

邱晨：微博iOS端的架構模式是以MVC和MVP爲主，同時配合單例的模式。其中信息流的架構主要採用MVP思想，咱們會創建一箇中間層處理業務邏輯和同步邏輯，而且將Data Source和一些其餘的Protocol在中間層實現。全部的基礎功能都被分離出來，創建對應的Store和Manager單例，在這些單例中完成網絡請求的發送、獲取和解析，在Controller中只需指定回調block。這些基礎功能和與之相應的Model將會組成像分享，未讀，日誌這樣的基礎類模塊。同時，咱們也會將一些業務邏輯移至Model的Category中，達到優化Controller的目的。

微博iOS的組件化是如何實現的？

邱晨：微博iOS端的組件主要分爲三層，包括業務層、基礎層和工具層，依賴關係自上而下。微博工程主要的模塊有信息流，Page，消息箱，登陸，分享，支付，多媒體，工具，網絡，UIKit等，如今已有60多個模塊，每個模塊爲一個獨立的Project，經過CocoaPods組裝。其中一些組件是能夠做爲SDK提供給第三方使用的，包括網絡，帳戶等。因爲微博工程還有一些第三方團隊在共同開發，同時也是爲減小開發過程當中編譯所花的時間，微博將每一個模塊的源碼編譯成靜態庫，採用LibraryPods的方式支持部分源碼編譯。在組件化以前，微博是比較重度使用OpenURL進行模塊跳轉的，可是OpenURL讓咱們在梳理邏輯時形成困難。因而在組件化優化以後，咱們已經減小OpenURL的使用。

微博的信息流很是複雜，那麼微博是主要從哪些方面加強信息流的可擴展性呢？

邱晨：微博iOS端包含多條信息流，主Feed，熱門推薦，周邊微博等。每一條信息流的來源是不同的，因此每一條信息流都會有與之對應的Stream實例，負責信息流的刷新，加載和存儲。在Stream實例中，全部的信息都是以Section片斷的形式存儲起來的，每個Section之間相互獨立。

在可擴展性上，微博仍是以部件化的思惟進行優化的。每一條微博中可能包含着各類各樣的內容，好比圖片、文字、視頻、PageCard，地點等。這些內容都會包含在一個Cell內呈如今信息流中，咱們經過Model對應的Adapter進行這些信息的拼裝組合。例如一條微博，可能包含多種信息，這時Adapter會來判斷使用哪種Cell，在Cell中展現怎樣的信息，進行拼裝，而且全部的佈局規則是在這個Adapter中實現的。而Adapter的展示形式是在Controller裏面進行配置的。同一條微博在熱門微博信息流的展示形式和主Feed多是不一樣的。每個部件只要各司其職，就能夠呈現出不一樣的展示效果。而此時Controller並不須要知道一條微博對應的是哪一種Cell，一個推薦用戶對應的哪一種Cell。

當咱們想在信息流中加入一種全新的內容時，咱們要作的就會很簡單。例如，當咱們要在主Feed中加入用戶推薦，只須要增長一個用戶推薦Model對應的Adapter，而且在主Feed的Controller中進行註冊。這種Adapter知道如何組合已有的用戶Avatar和用戶信息View。又或者咱們須要在信息流中支持頭條文章的內容。在創建文章Card View以後，只要在微博對應的Adapter中增長文章Card的佈局就能夠加入這種新的內容。

微博有不少長列表的典型場景，而長列表的渲染是客戶端性能優化的一個常見課題，微博iOS對於複雜內容的長列表渲染如何優化?

邱晨：對於長列表渲染的優化，微博開發了一套本身的異步繪製框架，這套框架於2012年上線使用，能夠說是國內第一個大規模應用異步繪製的iOS App。這套框架也使微博的滑動性能達到了業內領先，從低端設備只有30左右fps提高至全部設備接近60fps，目前fps平均值穩定在最理想的60，抖動很小。另外，還有不少其餘的優化點，例如按需加載，在快速滑動時不加載圖片。不阻塞主線程，尤爲是IO的操做。以及iOS端特有的預先計算和緩存高度，也能優化滑動效果。其餘諸如重用Cell等熟知的優化點就再也不贅述了。咱們也嘗試過在iOS端使用Facebook開發的ComponentKit框架進行信息流的優化，可是因爲效果並不十分顯著，因此擱置了ComponentKit的使用。

iOS端動態化和熱修復使用了哪些技術呢？

邱晨：熱修復方面，微博使用的是如今比較流行的JSPatch，咱們已經有JSPatch的發佈平臺用於管理腳本，因爲JSPatch對性能仍是有一些影響，每個腳本都會通過仔細評估纔會全量下發。在動態化方面，咱們也有嘗試React Native的使用，目前已有一些周邊頁面是基於RN框架開發完成的。

微博的iOS團隊是怎樣完成快速迭代的任務的？迭代週期如何？

邱晨：微博客戶端團隊採用的是敏捷開發模式，每兩週爲一個Sprint。在迭代週期開始前，各業務線根據技術排期分配下一個Sprint的任務。在迭代週期結束後，會有一週的測試期，進行三輪Full Case測試，此時只能進行重要Bug的修復。同時咱們會經過AB Test系統，控制Feature的上下線和投放比例，保證客戶端的穩定性。在Feature投放後，AB Test系統會收集相關業務的核心數據，並在控制檯進行對比展現。經過分析不一樣實驗組的數據反饋，進一步決定是否提升Feature的投放比例或者下線。

感謝您接受咱們的採訪。期待您在GMTC大會上的精彩分享。

 

 

 

由InfoQ主辦的GMTC全球移動技術大會將於6月24日在北京召開。來自BAT、攜程、滴滴、微博、和社區的技術專家聯袂分享，主題包括應用架構、性能優化、動態化、插件化、Swift、React Native、Weex等，爲中高級移動開發工程師獻上一場技術盛宴！目前8折優惠期間，多人團購更多優惠，欲購從速！