天貓11.11：多終端下的一致性體驗

　　今年的雙十一電商大戰完滿結束，各大電商也隨后相繼公布了各自的訂單數量和銷售總額。在這一次的電商大戰中，各大公司已經從單純的價格較量延伸 到平臺穩定性和用戶體驗上的競爭，而這些較量背后需要有相應的強大技術做支撐。其中，Web 前端直接和用戶交互，它的穩定性、流暢性直接決定著整個系統的用戶體驗。InfoQ 也采訪了天貓的前端架構負責人鬼道，以期與讀者分享天貓在 Web 前端方面的成熟經驗。

　　InfoQ：我們可以看到在整個雙十一的過程中，與用戶打交道的前端頁面訪問基本都很流暢。能介紹下天貓 Web 端的架構么？

　　鬼道： MAP（tMall fe Architecture & Publication）是天貓 Web 端的架構代號。MAP 涵蓋了一張頁面的代碼管理、開發環境、模板、數據接口、發布、終端判斷、線上監控、性能標準等各個方面。在本次雙十一中，我們全鏈路的性能都處于競品的頂 尖水平，如首頁第一、搜索結果頁第二、商品詳情頁第一。

　　另外，在移動端，我們使用了一項叫 Dynative 的技術，當使用天貓客戶端訪問雙十一的 Web 頁面時，客戶端會自動生成一個 Native 實現的 View，大大提升交互的流暢性和加載性能。另外我們也有同學在負責研究跨終端的組件方案，讓一套組件可以同時運行在手機、Pad 和 PC 上，當然在客戶端下時它同樣能轉換成一個 Native 組件，從而保證一致和優秀的用戶體驗。

　　在性能監控上，我們不但能區分不同地域用戶的性能情況，還能以網絡類型、客戶端、訪問類型（直接訪問、刷新、返回）、網絡協議（HTTP/1、 HTTP/2、SYDY）、操作系統等過濾條件分析應用性能。在性能指標上，不但有首字節時間、首次渲染時間、Dom ready、onload 這些常規指標，還提供重定向、DNS 查詢、TCP 鏈接建立、服務端響應、動畫幀數、內存占用等指標。對于應用的加載性能除了能提供以上提到的關鍵性指標外，我們還能提供應用加載過程截圖以及基于全網真實 用戶環境的加載瀑布圖。

　　InfoQ：為了保證業務峰值時用戶順滑的用戶體驗，淘寶對前端頁面做了哪些特殊處理？

　　鬼道： 如何保證在峰值時的用戶體驗，這也是我們最近重點的事情。從大的方面來說，主要有兩方面。一是業務 降級，通過監控重要接口的訪問情況，一旦訪問量超過警戒值，為保證核心鏈路的穩定性，會將其他來源的訪問按照預設的方案進行降級。二是 CDN，CDN 是靜態資源的主要載體，阿里前端的靜態資源默認都部署在 CDN 上，這個我一會再談。另外后端系統針對系統讀寫特性也有相應的動靜分離策略、容災策略和異常隔離策略。

　　InfoQ：不管是在首頁還是商品頁中，圖片都占了很大一部分，在如此大的高并發訪問情況下，網站的圖片仍然可以在短時間內顯示出來，真是一件不可思議的事情，圖片這塊，淘寶有用什么先進技術么？

　　鬼道：我們在全國各個省部署了大量的 CDN 服務器，把短時間內高并發的請求轉化成了分布式的處理，由每個省市本地的服務器來處理各自的請求，避免了大量數據跨長途骨干網往返；另外，我們在操作系統 的內核和 TCP 協議棧層面也針對網絡擁塞、丟包的情況做了優化，快速發現丟包縮短 TCP 協議的應變時間；通過精準的 IP 庫區分用戶區域，確保用戶訪問到離自己最近的服務器。

　　同時，天貓客戶端會根據網絡狀態展示不同質量的圖片，如 Wi-Fi 下展示高清圖片，非 Wi-Fi 網絡下展示普通圖片，這個策略在圖片質量和響應速度上做了很好的折中。另外，減少圖片請求在移動端上效果尤其明顯。Icon Font 用于維護一組圖標，在享受矢量圖形縮放和文字顏色可變的優勢上，也是減少圖片請求的一種方式；未使用 Icon Font 的圖標會通過 split 工具自動合并成大圖，同樣可以減少圖片請求數量。天貓的主要頁面上都已經做到在高清屏（移動和 PC 設備）上展示高清圖片，非高清屏上降級展示普通圖片。圖片格式方面，我們也有新的嘗試，在天貓商品詳情頁面上也部分啟用了 WebP，主要是考慮 WebP 相對 JPG 有更高的壓縮率，但 WebP 在移動端解壓速度的問題也不容忽視。

　　InfoQ：不同地區的用戶可能訪問的速度也不一樣，天貓在前端這塊有相應的監控手段么？

　　鬼道：有監控手段，我們會實時分析訪問日志，上報各個區域的用戶請求響應時間，在發現異常時通過 DNS 調度將用戶導流到正常的服務器上。

　　InfoQ：用戶可能會在不同的屏幕上訪問天貓，天貓是如何保證跨終端的一致性的？

　　鬼道：在一致性上我們有一個很重要的基礎設施 Detector。隨著無線互聯網的發展，業務上需要在不同的端給用戶呈現不同的內容，前端所面臨的終端環境也越來越復雜和碎片化，這就要求前端開發具備 方便獲取準確、一致的各種終端信息的能力，為了解決跨終端一致性問題，在雙十一之前，我們就設計和開發了多終端判斷基礎模塊 Detector，通過 Detector，我們實現了雙十一期間成百上千頁面的一致終端判斷，邏輯跳轉，不同終端內容輸出的艱巨任務。

　　Detector 是技術基礎，用戶感知到的一致性需要依靠上層應用在設計層面的一致性保證，由于天貓不同終端上的界面來自同一個設計團隊，這有利于設計風格和理念保持一致。為了更好地延續設計風格，天貓內部有一個 MUI 項目，就是將常用的界面元素封裝成組件庫。

　　InfoQ：在本次雙十一活動中，有哪些好的經驗可以分享給我們的讀者？

　　鬼道：經驗有很多，我挑些重點的來分享給大家。首先 Hybrid API 的應用可以降低跨客戶端開發成本。雙十一前我們推動發布了阿里 Hybrid API 1.0，它提供一套能夠運行在阿里多個客戶端和獨立瀏覽器的 18 組共 26 個 API，目前已支持天貓、淘寶、支付寶客戶端，既包括常用的傳感器 API 也有窗口管理、登錄、支付等 API。雙十一期間應用于天貓狂歡城、天貓店鋪互動、手機淘寶互動分會場等多個業務。

　　游戲引擎 Hilo。Hilo 是阿里研發的互動游戲引擎，支持 PC 端和移動端幾乎所有主流瀏覽器，也通過 Flash 支持 IE 6、7。Hilo 可以極大降低互動游戲的開發成本，適合阿里的業務場景。雙十一期間應用于天貓狂歡城、天貓店鋪互動、手機淘寶互動分會場等多個業務。

　　應用穩定性監控。對于應用的穩定性，我們有覆蓋所有端的監控系統，在 Native 端我們有實時的 Crash 監控平臺，在 Web 端我們有實時的 JS 報錯監控平臺。任何客戶端的報錯都能實時體現，例如我們發現 iPhone 客戶端在雙 11 時 Crash 率大幅上升，我們當晚立刻修復了問題，Crash 率恢復到了正常水平。

　　雙十一天貓首頁開閉幕式。相比去年而言，本次開幕式的的挑戰主要是動畫變得更加復雜，根據場景選用合適的動畫：CSS 3 動畫用于處理開始出現時的頭像波浪，CSS 3 動畫適用于大批量處理、動畫方式較為簡單的場景；JS 動畫用于處理中間兩個場景，JS 動畫使用了 KISSY 框架的 Anim 模塊，比較方便；Canvas 動畫主要應用于倒計時階段的粒子效果。

　　關注上下游系統及鏈路。雙十一需要保證是對客戶的整體體驗穩定、流暢，任何一個環節出錯都對這個目標有影響；前端處于用戶體驗的最前端，用戶的 體驗從這里開始，任何的差錯也會從這里產生；加上前端是所有后面系統服務的“消費者”，從消費者的角度關注和檢查，而不僅僅依賴服務方自身的監控和保證， 能最大限度減少出問題的概率。

　　充分的預演和測試。隨著移動的浪潮，前端所面臨的終端環境也越來越復雜，不再是僅僅關注幾種瀏覽器，加上系統碎片化的問題，所需要測試的客戶端越來越多，僅僅依賴于 QA 和前端的自測在日常中基本能保證主流的終端穩定，但在雙十一這樣的場景中，就顯得不足。

　　依賴于程序而非系統或人。雙十一其他每個時間段都有一定的狀態變化，從預熱到正式到下線，每個階段的操作我們都靠程序控制，提前上線，而不是依 賴于人或者系統的定時發布。沒有人可以做到 100% 不出錯，沒有系統可以保證 100% 穩定，將出問題的幾率控制到最小。

                    <span id="shareA4" class="fl">                  
                        </span>