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

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

[[144732]]

蔡鏡明，唯品會移動事業(yè)部高級經(jīng)理。主要負責(zé)電商移動運營平臺支持工作，專注構(gòu)建高效穩(wěn)定的電商運營支持系統(tǒng)。此前曾供職于百度，主導(dǎo)貼吧反作弊的多次技術(shù)架構(gòu)演進，同時負責(zé)百度私有云計算平臺的性能優(yōu)化。

移動業(yè)務(wù)攀升帶來成長的煩惱

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

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

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

“小系統(tǒng)”為“大運營”搭建穩(wěn)定支撐

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

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

框架

• UI：針對具體運營組件的邏輯封裝，包含常見的運營形式，比如單品、圖片、轉(zhuǎn)盤、優(yōu)惠券等。
• Service：包含兩種服務(wù)。一是定制的數(shù)據(jù)結(jié)構(gòu)服務(wù)，比如快速對象計數(shù)；另一個是通用業(yè)務(wù)服務(wù)，比如序列發(fā)生器。
• 風(fēng)險控制：當(dāng)涉及到錢或者高性價比的商品運營活動的UI接入Service，系統(tǒng)會通過彈性行為控制和UI動態(tài)識別等方式對用戶行為進行風(fēng)險控制。

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

平臺

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

Hybrid

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

數(shù)據(jù)驅(qū)動性能優(yōu)化

“早10晚8上新”是唯品會一個長期的運營案例，業(yè)務(wù)訪問在這兩個時點會呈現(xiàn)明顯的雙峰形態(tài)，由此帶來的系統(tǒng)背壓甚至可能導(dǎo)致級聯(lián)雪崩效應(yīng)。

為使用戶在最短時間內(nèi)得到最重要的信息，唯品會的移動前端業(yè)務(wù)系統(tǒng)針對性地對網(wǎng)絡(luò)接入和圖片壓縮兩方面進行優(yōu)化，并設(shè)立了兩個標(biāo)桿：100KB和500ms。

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

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

當(dāng)電商運營遇到移動Web

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

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