新浪微博iOS用戶端架構與最佳化之路

標籤：

新浪微博iOS用戶端架構與最佳化之路 

隨著Facebook、Twitter、微博的崛起，向UGC、PGC、OGC，自媒體提供平台的內 容消費型App逐漸形成了獨特的用戶端架構模式。與電商和通訊工具類App不同，微部落格戶端具有多資訊流、內容豐富多樣、對資料量和延遲敏感等特點。微博的資訊流承載著文字、網頁、照片、視頻、直播等多樣的內容形式，所以複雜資訊流對團隊的開發效率、App的效能都帶來了極大的挑戰。

2016年6月24-25日，GMTC全球移動技術大會將在北京舉行。本屆大會，我們邀請到了新浪微博移動端資深研發專家邱晨老師。曾就職於Facebook、Storm8、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折優惠期間，多人團購更多優惠，欲購從速！

新浪微博iOS用戶端架構與最佳化之路