史上最快破5億用戶的互動 - 2020雙11養貓技術大揭祕

前言

在電商領域，互動是一個重要的用戶增加方案，在提高用戶黏性、活躍以及拉新上都發揮着重要的做用。今年雙11，淘系互動團隊推出了「超級星秀貓」，咱們不蓋樓、不開車，全民參與養貓出道，3只風格各異的萌貓咪一經問世，瞬間俘獲了無數消費者的心。經過 EVA 互動體系一整套解決方案，大幅提高研發效率，支撐全民養貓貓在手淘、貓客、支付寶等多個 APP 互通。藉助客戶端能力及 EVA 互動體系將性能與內存良好控制，讓多數用戶體驗高清穩定的互動，實現 0 故障及秒開，同時星秀貓參與人數再創新高。這篇文章將主要從頁面渲染基建、EVA 研發體系和全局穩定性方案 3 個方面，來具體闡述淘系互動前端團隊是如何作到雙11互動又快又好又穩的。

（更多幹貨請關注【淘系技術】公衆號）

頁面渲染基建

不知道你們有沒有發現，今年的雙11養貓互動（如下簡稱雙11互動）頁面打開特別快，具體可看下面與去年雙11互動主頁在 iPhone 11 PRO 機器手機淘寶上的主頁加載對比視頻。不只如此，還有個明顯的變化是以往互動頁面的標配--進度條沒有了。

見多識廣的你也許會問，是否是今年雙11互動使用了 Native 版本？是否是今年雙11互動使用了緩存方案？是否是今年雙11互動也使用了預渲染技術？然而，答案是，都沒有，今年雙11互動與歷年狂歡城同樣，仍然是 web 頁面，且資源所有走 CDN 無額外緩存。

那麼，咱們是如何作到如此順滑的加載體驗呢？這就要從 Solution 提及。

Solution 是 天馬搭建體系的概念，主要解決的問題是將模塊+數據組合成頁面，簡單理解就是負責頁面渲染 Layout

自去年618起，淘系互動團隊所有業務都開始遷移到天馬搭建體系，Solution 也使用了官方推薦的通用 Solution。可是，通用 Solution 因爲其通用性，冗雜了淘寶/天貓 60% 以上業務邏輯（粗略估計），體積大的同時易受其餘業務影響致使穩定性風險高；而互動因爲其業務特殊性，不少優化甚至穩定性保障方案的實現也須要在 Solution 層面進行定製。基於此，淘系互動團隊定製了本身的頁面渲染方案，即互動專用 Solution，這也是今年雙11互動之因此那麼快的核心緣由。

得益於天馬團隊提供的新版 Solution 解決方案，既提供了標準化端渲染機制，又提供了基於插件進行業務定製的能力，還提供了產品化平臺。互動專用 Solution 是在上述解決方案的基礎上擴展實現，主要作了如下事情：

• 精簡基礎依賴/邏輯，去除非必要依賴及非必要邏輯
• 根據互動場景定製模塊加載順序，提供分批加載能力（當前主要是首屏/非首屏）
• 提供數據處理能力，經過去除渲染無關字段實現數據自動瘦身
• 內置基於客戶端評分的穩定性保障方案，保障互動頁面穩定性，詳見下面穩定性方案章節
• 增長資源及模塊加載監控，保障穩定性
• 集成互動通用能力，包括規範化 CSS/通用的渲染干預能力/經常使用的移動端調試方案/頁面上下線能力等

EVA 研發體系

今年雙11互動，很是多的用戶反饋貓貓們太好看了、太萌了、特別可愛，不少人都紛紛來諮詢小編是如何開發出來的。

接下來將重點闡述雙11星秀喵加工廠--EVA 研發體系，TA 是淘系互動團隊提供的從素材上傳到端上渲染的互動研發的一整套解決方案，以引擎、框架、工具、平臺爲支點，致力於爲廣大前端帶來簡單溫馨的互動研發體驗。

EVA 研發體系，提供互動研發一條龍服務，咱們是認真的

EVA Store：素材上傳服務

你們看到的星秀喵，並非3D模型，而是如假包換的2D骨骼動畫。它使用 Spine 製做，經過網格自由變形和蒙皮技術在視覺上呈現「3D軸」的偏轉，應用此類技術的動畫軟件還有大名鼎鼎的 Live2D。在 Spine 強大動畫創做的支持下，雙11的星秀喵纔有了「3D化」的動畫化表現力。一個標準的Spine動畫文件包含一張雪碧圖、一份骨骼數據以及一份動畫數據，那麼，咱們應該如何上傳到 CDN 呢？

EVA 爲了解決互動業務中常見且頻繁的動畫和模型素材，提供了一站式的素材上傳服務 EVA Store，包括幀動畫、雪碧圖、DragonBones、Spine、音頻等，這些互動素材的協議標準是由阿里巴巴經濟體互動小組統一制定。

EVA JS：2D 互動引擎

互動引擎是互動研發的基礎，一款好的互動引擎能大大下降研發成本，EVA JS 應運而生。EVAJS 是一款輕量級，用於開發互動遊戲的前端框架。EVA JS 支持插件體系，全部的互動遊戲能力都是由插件提供的。EVA JS 一方面可以讓前端互動遊戲開發更加專業，另一方面幫助前端開發者無需深度學習互動遊戲技術便可開發互動遊戲。TA 的總體設計是以遊戲行業最佳實踐的 ECS 設計模式爲基礎，拆分核心功能和組件能力，按需使用。

EVA JS 引擎

值得一提的是，EVA JS 還提供了無障礙化的支持。以往，遊戲區實現無障礙須要手動在圖層上添加輔助 DOM 來指定無障礙內容。今年雙11，EVA JS 研製了 Canvas 上的無障礙技術，可以在手機淘寶/支付寶客戶端上自動識別無障礙對象上的交互事件，下降研發成本的同時，讓廣大有障礙人士也能全方位體驗到擼貓的樂趣，真正作到了互動無障礙體驗。

雙11養貓無障礙體驗

EVA JS 計劃在2021年6月份前完成開源，瞭解更多，可參考 淘系前端互動引擎EVAJS架構與生態實現

Rax EVA：Rax 解決方案

素材和引擎都準備好後，就能夠上手開始寫代碼了。市面上大多數的遊戲引擎沒法和 JSX、Hooks 結合在一塊兒，這樣，開發者就須要學習「兩套框架」，再加上游戲引擎的學習成本也不低，總體上增長了開發門檻。爲解決門檻高、上手難的問題，淘系互動前端團隊設計了一套用於開發互動的 Rax 解決方案--Rax EVA，TA 是一個可以在Rax技術體系下，利用 EVA JS 的遊戲研發能力，開發動畫、遊戲類場景的框架。它可讓開發同窗用熟悉的 JSX 和 Hooks 語法編寫動畫、遊戲場景的代碼。

例如，咱們把上一章節上傳好的 Spine 動畫顯示出來（此處爲示意版僞代碼）

另外，對於前端來講，DOM 和 CSS 有自然的排版能力，這也是它們的優點。而遊戲引擎是經過圖形引擎渲染的，並不具有 CSS 那樣高級的排版能力。因而在整個遊戲互動的項目裏，即存在 Canvas 又存在 DOM+CSS，也就是所謂的混合開發。Rax EVA 也爲這類混合開發提供了方便快捷的方式，在 EVA 組件內，使用background / hud 這兩個原生標籤劃分了遊戲區域Z軸方向的三層佈局，在這兩個標籤內以及 EVA 組件外，任何DOM 標籤或其餘熟悉的 JSX 均可以照常使用。

互動項目分層最佳實踐

EVA Ware：彈窗規模化生產

除了基礎的遊戲研發外，EVA 研發體系還提供了一系列的低代碼工具或服務，其中表現尤其突出的就是在今年 618 互動中就表現優異的彈窗規模化生成方案（如下稱 Super Modal）。

互動研發最大的工做量之一就是彈窗的開發，相比今年 618，今年雙11互動彈窗數量更甚。得益於 Super Modal 在彈窗研發上的抽象，全部的彈窗樣式都是在平臺上簡易拖拽複製生成，經過 DSL+Runtime 提供端上穩定的渲染服務。彈窗的樣式、文案能夠做爲頁面配置項快速修改，前端在開發彈窗功能時，不用過多關注彈窗的樣式問題，專一於彈窗的顯示、關閉邏輯便可。除此以外， Super Modal 還在今年 618 功能的基礎上，增長了相對定位佈局、自定義組件、彈窗隊列管理器插件等功能，並提供了簡單的項目管理能力，進一步下降了彈窗開發的成本。

Super Modal 核心理念

瞭解更多，可參考 2020年618淘系技術分享-互動生產力進化之路

全局穩定性方案

細心的同窗會發現，今年雙11互動主頁動效特別多，除了開場視頻外，養貓和比拼的主界面上每一個區域都在各類動。你必定在好奇，爲何你沒有感受到卡或者出現閃退的狀況呢？這一切的背後，除了手機淘寶客戶端架構組底層升級外，也有全局穩定性方案在護航。

互動場景中存在大量動效、視頻，而太高的內存佔用可能會引起客戶端 crash 影響業務結果。一邊是客戶端須要更炫酷的玩法去支撐業務發展，一邊是一些設備性能較差的用戶反饋卡頓，如何讓全部設備都能流暢的參與互動呢？比起不顧一切的上動效或是一刀切的砍玩法，顯然存在一個更合理的選項--體驗分級。淘寶技術質量團隊提供了名爲 Kite 的獲取設備評分的統一降級 SDK，結合互動特性，以下圖所示，咱們將設備劃分爲 4 個等級，其中，容災等級時頁面將進入到一個異常兜底頁面，用於應對一些低版本或者兼容性較差的機器場景。至此，咱們完成了體驗分級。

互動設備分級

接下來，就是針對不一樣設備等級的機型作不一樣降級方案，這也是互動的穩定性保駕護航重要的一環。基於客戶端架構組提供的穩定性指標，咱們須要總體考慮頁面的內存、幀率、CPU 3 個指標，而動效、圖片尺寸、遊戲區畫布尺寸、FPS 等配置則直接影響這 3 個指標的結果。然而，衆所周知，在實際的開發過程當中，對每張圖片、每一個動效作針對性的降級每每須要各類配置項，且人人蔘與，操做起來很是繁瑣和耗時。所以，淘系互動前端團隊在上面體驗分級的基礎上，經過 1 份靜態全局降級規則 + 1 個運行時獲取配置的穩定性保障 SDK，設計了一套完整的全局穩定性保障方案。

全局穩定性保障方案

正是這套穩定性方案，讓雙11互動在極大程度作到了高清互動、符合了架構組驗收標準並且在線 22 天全程 0 故障。TA 讓互動穩定性保障更加系統，也已經成爲營銷互動的標配。

總結展望

今年雙11總體節奏從以前的「光棍節」到今年的「雙節棍」，在這樣變化的背景下，今年雙11互動依然作到了參與人數再創新高。將來，咱們但願完善 EVA 體系，經過不一樣的技術方案不斷地優化咱們的開發方式和生產關係，逐漸讓更多的人來開發互動，實現「人人可開發，到處有互動」。

加入咱們

淘系互動團隊目前負責「芭芭農場」、「金幣小鎮」、「淘寶人生」等手淘內千萬級的互動產品，重點打造雙促、春節、市場PR等S/A級營銷互動，同時爲商家、達人、主播等沉澱和提供私域內的互動玩法。若是你對 工程/搭建/低代碼研發方向 或者 WebGL/圖形渲染/特效方向 等存在興趣，歡迎微信聯繫/釘釘進羣瞭解更多，完整 Job Model。