簡介：?整體介紹一下淘系前端在今年雙11的思考和沉淀。

今年雙11的整體節(jié)奏從之前的“光棍節(jié)”變?yōu)椤半p節(jié)棍”，具體業(yè)務上也有很多變化和調整，應了阿里的土話“唯一不變的是變化”。面對這些變化，是挑戰(zhàn)也是機會，我們要做的就是，“既要”高效支撐保障業(yè)務先贏，“又要”確保體驗和穩(wěn)定性帶給用戶極致體驗，“還要”追求創(chuàng)新讓前端持續(xù)演進。為了實現(xiàn)“既要、又要、還要”，包括技術方案、流程機制、人員組織等各方面都進行了大量的設計和保障。最終第一次雙峰的雙11圓滿結束，淘系前端也實現(xiàn)了自己的目標，包括應用大量優(yōu)化手段和創(chuàng)新方案帶來業(yè)務轉化提升；將FaaS、PHA、ESR等技術應用在更多場景，分別向服務端、客戶端、CDN節(jié)點進一步拓展了前端的能力和邊界；應用視覺還原、一體化研發(fā)等提升研發(fā)效率，大幅緩解資源瓶頸等等。下面會整體介紹一下淘系前端在今年雙11的思考和沉淀，希望對大家有所助益。后續(xù)也會有各個專項的系列文章，希望大家持續(xù)關注。

變化 & 挑戰(zhàn)

今年的雙11，首先感受到的就是源源不斷的變化。

單峰變雙峰：雙11從之前的一個波段變成今年的兩個波段，大促的三個階段預售、預熱、正式也都對應的翻倍。首先帶來的是研發(fā)工作量的大幅增加，在時間排期不變、工作量增加、人員不變的情況高效的完成需求研發(fā)是第一重挑戰(zhàn)；其次面對6個階段的狀態(tài)變化，如何保持準確切換、穩(wěn)定運行、體驗流暢是在雙峰期間要重點保障的內容；最后面對超過20天的超長作戰(zhàn)期，安全生產(chǎn)、人員狀態(tài)保持、快速反應都需要有強力的組織和機制進行保障。

圖：雙11節(jié)奏

首頁大改版：最新的淘寶首頁首屏內容有顛覆性的變化，比如首屏內容簡化，推薦提前，頻道作為內容嵌入推薦等。各個業(yè)務在缺少固定的流量入口的情況下，包括運營策略、產(chǎn)品策略、設計方案、技術方案都需要積極調整。同時在各個場景的推薦能力也需要持續(xù)增強，今年雙11通過將坑位數(shù)擴展到1000+，理論可達無限擴坑；通過智能UI提升用戶點擊率。

圖：手淘版本對比

業(yè)務變化：業(yè)務創(chuàng)新和新玩法層出不窮，包括mini詳情、旗艦店、價格表達、筆筆返、芝麻購等在內的很多業(yè)務都是全新的表達、顛覆式的升級。即是業(yè)務上新的嘗試，在技術上也要解決架構選型、對賬、一致性表達、排期等問題。

做好本職

首先要做的就是做好本職工作，保障需求研發(fā)和穩(wěn)定性。需求研發(fā)方面，我們通過D2C實現(xiàn)了大部分UI模塊自動開發(fā)、通過建設Eva互動體系降低互動研發(fā)成本、通過Serverless的一體化研發(fā)提升研發(fā)和運維效率，使前端不再成為資源瓶頸。穩(wěn)定性上，也通過一系列機制和工具體系進行保障。同時增加一塊大家平時可能不太關注的資損防控的策略和方案。

? D2C研發(fā)提效

去年雙11我們設立了研發(fā)效率專項，核心就是通過 設計稿生成代碼(Design to Code, D2C)平臺 Imgcook 來提升研發(fā)效率。最終在去年的雙11大促會中承接了 78.94% 的新增模塊代碼自動生成，代碼可用率達到 79.34%。

今年前端智能化助力前端研發(fā)模式升級，數(shù)個 BU 共建前端設計稿識別算法模型和數(shù)據(jù)集，設計稿生成代碼技術體系全面升級，如對 UI 多態(tài)、直播視頻組件、循環(huán)的智能識別增強等。今年雙11會場承接了 90.4% 的新模塊代碼智能生成，代碼可用率達到 79.26%（對比去年升級設計稿智能檢查能力，視覺稿無需人工輔助調整）。得益于D2C的研發(fā)提效，今年并沒有出現(xiàn)往年借調資源投入會場開發(fā)的情況。相比傳統(tǒng)模塊開發(fā)模式，使用設計稿生成代碼技術后編碼效率（模塊復雜度和研發(fā)耗時比值）提升68%，固定人力單位時間模塊需求吞吐量增加約 1.5 倍。

圖：D2C操作流程

? 互動研發(fā)升級

在電商領域，互動是一個重要的用戶增長方案，在提升用戶黏性、活躍以及拉新上都發(fā)揮著重要的作用。今年雙11，淘系互動團隊推出了“超級星秀貓”，我們不蓋樓、不開車，全民參與養(yǎng)貓出道，3只風格各異的萌貓咪一經(jīng)問世，瞬間俘獲了無數(shù)消費者的心。通過 EVA 互動體系一整套解決方案，大幅提升研發(fā)效率，支撐全民養(yǎng)貓貓在手淘、貓客、支付寶等多個 APP 互通。借助客戶端能力及 EVA 互動體系將性能與內存良好控制，讓多數(shù)用戶體驗高清穩(wěn)定的互動，實現(xiàn) 0 故障及秒開，同時星秀貓參與人數(shù)再創(chuàng)新高。后續(xù)的系列文章將具體闡述淘系互動前端團隊是如何做到雙11互動又快又好又穩(wěn)，內容涵蓋互動基礎、EVA研發(fā)體系和全局穩(wěn)定性方案3個方面。

圖：互動效果圖

? Node FaaS一體研發(fā)

Serverless云+端研發(fā)模式通過打通頁面代碼和服務代碼進行一體研發(fā)，使得前端可以從前臺頁面到后端服務完整支撐，節(jié)省中間溝通和聯(lián)調成本。在天貓榜單以及V榜的落地，使得雙11 Node FaaS 相關業(yè)務整體研發(fā)效率提升38.89%。行業(yè)導購雙11需求也在云+端的新模式下支撐外包快速入場，使得整體提效約20%。

? 穩(wěn)定性保障

穩(wěn)定性保障貫穿從項目啟動到結束的整個雙11周期，下面從幾個重點方面進行簡單的介紹：

變化評估：每年的雙11都是站在巨人的肩膀上，都經(jīng)過了上一次雙11的考驗。主要的風險就變成新增的部分以及變化的部分，這里的變化既包括技術上的變化也包含人員上的變化。要做到對變化的充分評估，在99大促進行驗證，并且保證99大促后不再進行變化，以一個穩(wěn)定的狀態(tài)迎接雙11。

壓測：首先要進行流量評估，借鑒去年數(shù)據(jù)的同時結合今年的變化，進行相應的機器、帶寬等資源準備。完成單線路壓測，保證在預估流量模型下，自己的服務和上下游都能夠運轉正常。進行全鏈路壓測，核心驗證在0點高峰時各業(yè)務并發(fā)的情況的運轉情況，尤其是一些底層公共服務，以及優(yōu)先級的保障情況。

兜底&預案：兜底一般指在大流量或其他不可控因素的情況下，如何將用戶體驗和業(yè)務損失降低到最小。預案需要評估可能遇到的各種情況，以及對應的處理方案。

驗收：功能預演，按照用戶的所有使用路徑進行操作，目前這個工作仍是人工。時間穿越，將頁面和系統(tǒng)的狀態(tài)都調整為活動時間來驗證，需要打通上下游的各個系統(tǒng)并形成聯(lián)動。機型驗收，基本分為高端機、中端機、低端機，分別進行驗收，很多業(yè)務都需要針對低端機做功能降級。穩(wěn)定性驗收，單獨頁面的性能和穩(wěn)定性各自保障，但業(yè)務疊加后很可能存在問題，尤其像會場、互動、直播、旗艦店等內存消耗大戶，互相之間都有引流，切換后很難保證，需要整體全鏈路驗收。

變更&應急：歷次的故障數(shù)據(jù)表明，大部分的問題都是由于變更導致的，如何做好變更管控尤為重要。根據(jù)時間分為弱管控、強管控期；根據(jù)業(yè)務等級分為集團核心應用、BU核心應用、非核心應用等；建立變更的CR和審批的機制。應急主要指在核心活動期間，問題、輿情、故障等流轉機制，針對問題發(fā)現(xiàn)、定位問題、修復問題時間作出要求，不同等級如何決策作出安排。

監(jiān)控：淘系前端持續(xù)進行監(jiān)控能力的建設和升級。需要保障大促高峰的可用性以及報警的實時性，覆蓋所有的業(yè)務場景。針對越來越復雜的場景，需要端到端的監(jiān)控和數(shù)據(jù)分析平臺。灰度過程缺少度量和定點監(jiān)控。根據(jù)這些問題和需求，jstracker提供了安全生產(chǎn)的整體解決方案，打造端到端的前端監(jiān)控與數(shù)據(jù)分析平臺，打造實時監(jiān)控、多端覆蓋、數(shù)據(jù)分析、智能化的數(shù)據(jù)平臺。同時根據(jù)頁面情況、錯誤日志、源站數(shù)據(jù)、FaaS日志等打造了雙11的前端數(shù)據(jù)大盤。

? 資損防控

一直以來前端資損防控是平臺非常薄弱的一環(huán)，前端觸發(fā)的資損和輿情問題不在少數(shù)。之前全靠開發(fā)同學的經(jīng)驗和意識來保證，缺少體系化的資損防控能力。去年開始組織了團隊層面的集中篩查和人工預演，對人力和時間的消耗非常巨大，并且很難保證質量并進行積累和沉淀。所以為了能有一種成本更低、預防效果更好的方式進行資損防控，2020年 S1 伊始，就重點對資防做相關產(chǎn)品化的設計和實現(xiàn)。同時今年也重點增加了商家、運營中后臺側的資損防控。

我們將資損防控氛圍了三個階段，研發(fā)階段、操作階段、運行階段。研發(fā)階段給存在資損風險的倉庫打標，將常規(guī)的價格、優(yōu)惠、默認文案等case進行枚舉，通過靜態(tài)掃描、UI測試用例掃描等方式進行防控。操作階段，主要是指商家、運營進行優(yōu)惠、權益等設置的階段，通過表達方式統(tǒng)一（避免5折、0.5折造成理解差異）、二次確認、限定邊界值、低價預警等進行防控。運行階段有快照對比、服務端數(shù)據(jù)對賬等方式，運行階段的防控相對滯后，發(fā)現(xiàn)時很大概率已經(jīng)造成實際的影響。

然而，目前仍是預防為主，不能百分之百保障沒有資損故障發(fā)生，接下來我們還在構思鏈路級別的、生產(chǎn)環(huán)境上的防控手段，建設一些告警和自動止血為平臺保駕護航。

業(yè)務價值

做好本職的基礎上，我們希望給業(yè)務帶來增量價值。本章從會場性能優(yōu)化提升轉化、基礎鏈路新方案提升轉化、喚端技術定制策略提升精準率、智能UI為不同人群提供不通過UI提升點擊等4個方面來介紹。

? 性能提升

會場是每年雙11的主角之一，會場的用戶體驗自然也是每年最關注的點。在日趨復雜的業(yè)務需求下，如何保障我們的用戶體驗不劣化甚至能更優(yōu)化是永恒的命題。今年分別使用了預渲染方案和SSR方案進行優(yōu)化，首先是重新定義了秒開的標準，從原來的前端時間升級到從用戶點擊經(jīng)過跳轉到頁面可視的時間，增加了客戶端路由、webview啟動等時間，使體驗的衡量更貼近用戶真實的體感。覆蓋了包括主會場、行業(yè)會場、外投會場等數(shù)十個場景。

預渲染

預渲染是在今年雙11會場中使用的技術方案，用于提升用戶打開會場的體驗。將原有H5頁面渲染流程中的WebView的初始化、頁面資源加載、部分JS的執(zhí)行等耗時的操作，提前執(zhí)行，在離屏狀態(tài)下完成頁面“渲染”。當用戶真正點擊進入會場的時候，復用這個提前“渲染”的頁面，大大節(jié)省打開會場的時間。用戶打開會場的整體平均耗時縮短了200ms~700ms左右，秒開率提升10%-14%。優(yōu)化對中低端機絕對收益更高，已實現(xiàn)在低端機上實現(xiàn)秒開會場。讓用戶逛會場體驗更流暢了，尤其中低端手機效果更加明顯。在后續(xù)的文章也會講述包括預渲染、數(shù)據(jù)快照、并行請求等性能優(yōu)化方面的實踐與思考。

圖：中低端機型預渲染效果對比圖

SSR

今年在不改變現(xiàn)有架構，不改變業(yè)務的前提下，在會場上使用了 ServerSideRendering 技術，將秒開率提高到了新的高度（82.6%）；在用戶體驗得到優(yōu)化的同時，業(yè)務指標如點擊率等也有明顯的增長，帶來了不錯的業(yè)務價值。后續(xù)的系列文章匯中會詳細介紹前端在解決工程化、業(yè)務效果評估上的具體實踐與方法論；服務端在解決前端模塊代碼于服務端執(zhí)行、隔離和性能優(yōu)化上的思考和方案。

圖：中低端機型 SSR 效果對比圖

基礎鏈路

基礎鏈路是電商核心的鏈路，包含首頁、商品詳情、微詳情、交易（下單、訂單、購物車、支付成功）、信息流、我的淘寶等基礎業(yè)務。現(xiàn)有的技術方案是手淘內使用Native版本，追求極致的體驗和穩(wěn)定性；站外流量、包括支付寶在內的阿里系App使用H5版本，追求靈活性和可用性。隨著支付寶容器化體系的完善，在其他App中的內聚，基礎鏈路新的容器化版本具備了孵化的土壤；同時H5的一些弊端，比如資源都在遠端、Native能力使用限制等也可以得到優(yōu)化。

借助之前的“新奧創(chuàng)”和“DinamicX”方案（主要解決業(yè)務定制以及安卓、iOS、H5的三端一致，實現(xiàn)一處開發(fā)、三端生效），容器化版本得以快速擴展，實現(xiàn)四端一致。性能數(shù)據(jù)上，加載時間對比H5版本有2s的提升，基本達成秒開的目標；業(yè)務數(shù)據(jù)上，容器化版本對比H5版本UV轉化率提升70+%。

目前已覆蓋支付寶、特價版、優(yōu)酷、高德、淘小鋪、一淘等App，以及通過百川SDK集成在眾多外部媒體App。業(yè)務上也接入了每日必搶、大牌直降、淘寶特價、淘寶直播、百川媒體、優(yōu)酷、小鋪、輕店、花唄等業(yè)務。

喚端技術

隨著流量見頂、電商大戰(zhàn)進一步升級，如何做好用戶增長是各大公司必須完成的命題。用戶增長涉及的面非常廣泛，今年淘系前端聚焦在喚端技術，即外部流量拉起手淘App的技術體系。喚端技術的門檻很低，簡單到只需要拼一個類似 URL 的 scheme 就可以觸發(fā)喚端。喚端技術又很復雜，不同的渠道、不同的OS、不同的 App 都有可能針對喚端協(xié)議有限制，并有各種各樣的兼容性問題；喚端鏈路中不同業(yè)務可能都有自己的業(yè)務定制需求，例如參數(shù)的透傳；喚端鏈路的效率更是被關注的核心點，不同場景不同業(yè)務在效率上可能都不一樣，因此還需要對喚端效果進行監(jiān)測和對比。為了解決這些復雜的問題，我們在喚端技術上進行了又一次升級，建設了可定制的喚端策略，打造了詳細的喚端AB測試鏈路。從本次雙11 的效果看，不同場景下的喚端效率（喚端成功率）相對提升了 25~40%不等。

圖：喚端策略圖

智能UI

隨著移動互聯(lián)網(wǎng)和推薦系統(tǒng)的發(fā)展，人和商品的精準匹配為業(yè)務帶來了效率的大幅提升。越來越多的精細化手段逐漸應用于個性化推薦領域，比如場景化推薦、人群定投技術等。同時商品的信息比以往任何時候都要豐富（買家秀，品牌背書，無憂購服務等），不同的用戶對于內容的UI表達有著差異化的訴求，因此通過為不同人群找到合適的UI表達一定能帶來業(yè)務效果的提升。

項目的最早期，我們通過AB實驗直接定量測試，明確了相同的UI方案在不同的場景會產(chǎn)生差異，不同的UI方案在相同場景下也會產(chǎn)生差異。也就是說，針對不同場景使用不同方案是有意義的。2020年雙11大促我們第一次大規(guī)模采用智能UI產(chǎn)品化方案落地了多個前端模塊，包括猜你喜歡模塊、商品模塊、店鋪模塊等，覆蓋了雙11的預售和正式開賣階段，承受了流量洪峰的考驗，且?guī)砹朔€(wěn)定的增長。覆蓋300多個會場，最高的會場PV點擊率相對提升10%+。

技術升級

伴隨業(yè)界的技術演進和業(yè)務的發(fā)展，我們在技術上相比去年也有了新的嘗試和迭代升級，其中典型的包括FaaS的深度使用、PHA漸進式的體驗增強、邊緣節(jié)點渲染的應用等。

? FaaS

Serverless，一塊深水的堅冰，逐步從深海付出了水面，阿里淘系從去年在大促實踐開始，逐漸將 Serverless 應用到前端領域方方面面。今年雙11首先是在覆蓋場景方面，FaaS從淘寶行業(yè)拓展到會場和營銷業(yè)務，業(yè)務的復雜度得到極大的豐富。能力進一步提升，支撐的業(yè)務量級也從2k QPS提升到5W QPS，CPU水位從去年的高 QPS 規(guī)模時，精力花費降低約50%。在研發(fā)體驗方面，打造解決方案體系，單元保障、大促管控、專家系統(tǒng)、函數(shù)盤點等能力，運維提效約50%。在研發(fā)體驗方面，打造解決方案體系，降低研發(fā)門檻，支持外包快速入場。

? PHA

PHA 全稱 Progressive Hybrid App，是提升 Hybrid 體驗的一種應用框架。提升頁面加載速度和交互體驗的漸進式 Web 應用，使用 PHA 開發(fā)的應用本質上沒有脫離前端開發(fā)和 W3C 標準，但依然擁有原生應用的特性和體驗。或許你有想到 PWA，但 PHA 有比 PWA 更強的 UI 能力和更快的加載速度。目前已經(jīng)在手淘、特價版、Lazada、CBU 等多個客戶端落地，支持了618、雙11等多個大促。PHA聯(lián)合客戶端、前端團隊、數(shù)據(jù)分析團隊，跨棧協(xié)同，在性能優(yōu)化方向上也做了很多優(yōu)化工作，梳理全鏈路性能埋點、定義新的性能口徑（從用戶點擊到可視），使用了預加載、預渲染、資源加速下載、離線資源等優(yōu)化手段。

? ESR

現(xiàn)在的渲染節(jié)點主要是在終端或是服務端，對應CSR（Client Sider Rendering）和SSR（Server Side Rendering），分別有適用的場景以及優(yōu)勢和弊端。現(xiàn)在借助阿里云的能力可將渲染轉移到CDN節(jié)點，也就是我們要介紹的ESR（Edge Side Rendering），即能為前端提供渲染能力，同時也能將大量CDN機器上的計算資源利用起來。

阿里云推出了CDN輕量編程環(huán)境——EdgeRoutine，這為我們提供了一個新的嘗試方向。我們可以在CDN節(jié)點去做提前渲染的事情。CDN的訪問策略是會去尋找離用戶最近的節(jié)點，就像快遞運輸?shù)淖詈笠还镆粯?#xff0c;總會派送到離客戶最近的分撥點。這么看來頁面的網(wǎng)絡調度時長是非常有優(yōu)化空間的。并且我們還可以利用CDN節(jié)點資源共享的特性，將部分數(shù)據(jù)緩存到CDN節(jié)點上，減少遠程的數(shù)據(jù)請求。

這套方案對于數(shù)據(jù)刷新率不高、訪問量極大的頁面，ESR搭配CDN的緩存能力是非常適合用的。以達人頁為例，首屏時間約能提升50%左右。現(xiàn)在ER的技術才剛剛起步，應用場景比較局限，能力上還有很多不足，體系也需要不斷地建設，但這個新技術為前端提供了更多可能，需要我們不停的去探索和完善。

? 雙11 PM 初體驗

雙11作為電商年度最核心的節(jié)日，各方面投入的力度和資源都是最大的。作為參加過8次雙11的老兵，作為前端PM是第一次，有很多不一樣的感受。

復雜：首先是業(yè)務上，有雙11定制和特有的主會場、主互動、貓晚等，還有淘系內部本身就有導購、行業(yè)、營銷、直播等數(shù)十個業(yè)務，同時聯(lián)動支付寶、優(yōu)酷、本地生活、阿里媽媽、菜鳥等多個集團BU，與商家、ISV、物流、媒體等的協(xié)同和合作。技術上同樣復雜，前端的頁面從開發(fā)、搭建、源站、CDN的全部鏈路，以及Node FaaS的容器、中間件、容量準備、流量調配、機房部署等。管中窺豹，對于整個體系的認知還需要更進一步的探索。

流程：雙11作為電商業(yè)務每年的大考，已經(jīng)摸索出一套成熟的流程機制。包括人員的組成、溝通機制、時間排期、組織保障等各個方面都有很細致的機制進行保障。

協(xié)同：雙11是非常好的節(jié)點，可以讓各團隊、各崗位、各BU之間形成聯(lián)動，集中力量將如此龐大的體系進一步完善。很多技術的升級和突破都是在雙11落地并進一步推廣的。這次預渲染的方案就是客戶端和前端緊密協(xié)同，在很短的時間內實現(xiàn)并驗證的。

多維：看問題的視角可以更多維，不同技術崗位視角，全鏈路視角，業(yè)務的視角。以一次變更的審批為例，之前更多關注變更的代碼實現(xiàn)上，對上下游的影響、對穩(wěn)定性的影響、對業(yè)務的影響、是否引入新的風險、影響的范圍等等都需要進行綜合衡量，做一個判斷往往需要從中進行取舍，而不單單是技術上的1和0。

招兵買馬

最后的最后，招聘貼！

淘系前端由淘寶前端、天貓前端、手淘前端三大前端團隊融合而成，在業(yè)務上負責淘寶、天貓的所有業(yè)務，如：雙11&雙12大促、聚劃算、天貓新品、有好貨等營銷導購產(chǎn)品、淘寶直播&短視頻業(yè)務、商業(yè)千牛以及開發(fā)、用戶增長、互動&游戲等等，囊括了新零售域下最復雜、最多形態(tài)的業(yè)務場景；在技術上在前端工程、多端架構、Node架構、互動架構等基礎體系上有著深厚的沉淀，同時在多媒體、前端智能化、云手機等新興體系上布局&發(fā)展，在搭建&投放、小程序開放、工作臺等應用體系上直接助力業(yè)務。

?

原文鏈接
本文為阿里云原創(chuàng)內容，未經(jīng)允許不得轉載。

總結

以上是生活随笔為你收集整理的4982亿背后的前端技术—2020天猫双11前端体系大揭秘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。