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

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

[[144732]]

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

移動(dòng)業(yè)務(wù)攀升帶來(lái)成長(zhǎng)的煩惱

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

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

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

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

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

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

框架

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

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

平臺(tái)

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

Hybrid

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

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

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

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

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

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

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

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

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