移動互聯網正在全面滲入人們的生活，這使用戶的時間分配和消費習慣都發生了改變。移動購物日趨主流，電商運營進入到了更高級的創意營銷和與用戶深層互動中的比拼中來。

近年來，唯品會在國內電商平臺的廝殺中異軍突起，來自移動端業務的快速增長對此起到至關重要的作用。面對訪問量的快速攀升，以及一次次成功營銷帶來的流量沖擊，唯品會移動運營支持系統遭遇到了巨大的技術挑戰。讓我們跟隨WOT 2015移動互聯網開發者大會講師、唯品會移動事業部高級經理蔡鏡明，一起了解唯品會移動端WebApp系統架構，在實現高速迭代和基礎性能持續改善的過程中的實踐與思考。 

[[144732]]

蔡鏡明，唯品會移動事業部高級經理。主要負責電商移動運營平臺支持工作，專注構建高效穩定的電商運營支持系統。此前曾供職于百度，主導貼吧反作弊的多次技術架構演進，同時負責百度私有云計算平臺的性能優化。

移動業務攀升帶來成長的煩惱

為了培養用戶的消費習慣，唯品會大力發展移動端業務，開拓了旅游、O2O、家居等領域的新主題。而“特賣”作為其核心的業務模式從未發生過改變，移動網絡也更能突出隨時隨地的搶購場景。通過不斷的努力，移動端業務訪問量攀升。2015年一季度，唯品會業務成交量總額中的72%都來自移動端。然而，這也讓蔡鏡明和他的團隊感受到了極大的技術挑戰：

• 運營工具桎梏生產。支持運營的工具鏈不完善，使移動業務線性增長所帶來的運營需求呈指數增長，大大降低生產效率。
• 頁面性能影響業務轉化率。轉化率是電商的核心。頁面加載每提升100毫秒，實際轉化率就會提升幾個萬分點。而運營模塊設置不合理、流量瞬時高并發都會拉低頁面性能，阻業務轉化率的提升。

運營同學在前面呼喚著，奔跑吧，業績！而工具鏈以及最終頁面卻給他們套上一個個枷鎖。怎么破？蔡鏡明帶領他的技術團隊做出如下探索。

“小系統”為“大運營”搭建穩定支撐

唯品會的整個業務模式具有很強的運營導向。這些花樣百出、讓人眼前一亮的玩兒法，是綜合了流量轉化、客戶心理、渠道習慣、活動貨值等復雜的運營因素計算得來的。支撐移動運營系統的技術體系，既要充分解耦保證高可用，也要能夠快速響應業務前端變化。

為了沖破系統瓶頸，唯品會移動技術團隊提出“運營積木”的解決思路。首先對整個移動端電商系統進行服務在上，垂直業務系統在下的兩層拆分；再繼續將移動端的在線服務拆分一個個穩定的小系統，來建出對整個運營流量的支持。這個穩定的“運營積木”由框架、平臺和Hybird三個部分搭建而成。

框架

• UI：針對具體運營組件的邏輯封裝，包含常見的運營形式，比如單品、圖片、轉盤、優惠券等。
• Service：包含兩種服務。一是定制的數據結構服務，比如快速對象計數；另一個是通用業務服務，比如序列發生器。
• 風險控制：當涉及到錢或者高性價比的商品運營活動的UI接入Service，系統會通過彈性行為控制和UI動態識別等方式對用戶行為進行風險控制。

整個框架與中間層以及入口的數據交互是靠異步隊列和緩存來同步的，這樣既保護了后端系統的服務容量不至突發性過載，也提升了運營前端系統的響應速度。通過這種方式，唯品會將制作一個運營類頁面的時間控制在15分鐘，極大釋放了生產力。

平臺

• 配置中心：針對不同終端平臺和功能模塊實靈活地展示布局配置。
• 監控：細力度的監控拆分。每個獨立的UI和Service 都會有自己的自動化業務監控。當需要在其他運營系統里復用這個監控時，可以通過rest接口得到實時監控圖譜，降低運營監控和分析二次開發的成本。
• 開發和發布：實現到從開發到測試，再到發布的全流程支持。當有一些UI或Service不確定時，可以通過線上真實數據或歷史流量回放看到最終UI形態，確認沒有問題后再通過Gulp打包發，并通過后臺的一些接口來做校驗。

Hybrid

• 容器：圍繞JSBridge 擴展容器的服務能力。具體表現在兩方面，一是增強H5能力，比如硬件接口、UI交互，push；二是滿足業務運營的需要，比如用戶鑒權，以及敏感操作的數據交互代理。
• 部署：把H5運行所必須的靜態資源“內置”到App，把App當成一個個local server跑在用戶側，按一定規則攔截H5請求，進行再分發。規則由平臺Hybrid規則引擎根據運營需要進行維護，數據和熱資源則推送到CDN進行緩存，供Hybrid容器接受指令更新。
• 監控：資源更新情況、接口訪問質量、甚至容器里跑的H5頁面的加載性能，都會通過容易的數據代理上報會平臺的監控單元。通過從建立連接到頁面渲染的每個動作的耗時分布監控，再來展開針對性的性能調優。

數據驅動性能優化

“早10晚8上新”是唯品會一個長期的運營案例，業務訪問在這兩個時點會呈現明顯的雙峰形態，由此帶來的系統背壓甚至可能導致級聯雪崩效應。

為使用戶在最短時間內得到最重要的信息，唯品會的移動前端業務系統針對性地對網絡接入和圖片壓縮兩方面進行優化，并設立了兩個標桿：100KB和500ms。

首先，在頁面圖片保證合理清晰度的前提下，將各種運營規格的圖片壓縮到不超過100KB；而壓縮之后的上新圖片會被直接寫進頁面。由于用戶的排序和實際看到的品牌是通過個性化計算得出的，因此每張具體的圖片并不會因為展示序列的變化而變化。

此外，在對圖片進行壓縮和網絡設施優化后，移動端的用戶看一張圖片的時間不會超過半秒,這也就是上面說到的第二個標桿。同時移動技術團隊通過觀察對移動網絡域名進行收斂，使其在網絡基礎設施和用戶體驗之間找到***的平衡點。

當電商運營遇到移動Web

短短幾年間，唯品會完成了從一個不起眼的小公司向大咖的華麗逆襲。面對業務快速發展和系統的頻繁迭代，蔡鏡明將“創新落地”和“高效執行”這個詞作為最深刻的感悟和大家分享。在他看來，堅持做一些基本但必須的事情來保證系統的高效穩定，才能使創新不變得天馬行空。

與蔡鏡明簡短的交談讓筆者受益匪淺，這其中更多的是對那份順勢而變，又忠于自我的態度上的感悟。遇到移動互聯網的電商真的變了嗎？對，確實變了。但移動電商的核心仍然是電商。變或不變，機遇和挑戰都在那里，于煩惱中成長的路上，且行且珍惜。