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

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

[[144732]]

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

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

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

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

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

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

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

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

框架

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

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

平臺

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

Hybrid

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

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

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

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

首先，在頁面圖片保證合理清晰度的前提下，將各種運(yùn)營規(guī)格的圖片壓縮到不超過100KB；而壓縮之后的上新圖片會被直接寫進(jìn)頁面。由于用戶的排序和實(shí)際看到的品牌是通過個(gè)性化計(jì)算得出的，因此每張具體的圖片并不會因?yàn)檎故拘蛄械淖兓兓?/p>

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

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

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

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