今年雙十一整體節奏從之前的“光棍節”到今年的“雙節棍”，具體業務上也有很多變化和調整，應了阿里的土話“唯一不變的是變化”。面對這些變化，是挑戰也是機會，我們要做的就是，“既要”高效支撐保障業務先贏，“又要”確保體驗和穩定性帶給使用者極致體驗，“還要”追求創新讓前端持續演進。為了實現“既要、又要、還要”，包括技術方案、流程機制、人員組織等各方面都進行了大量的設計和保障。最終第一次雙峰的雙十一圓滿結束，淘系前端也實現了自己的目標，包括應用大量優化手段和創新方案帶來業務轉化提升；將FaaS、PHA、ESR等技術應用在更多場景，分別向服務端、客戶端、CDN節點進一步擴充了前端的能力和邊界；應用視覺還原、一體化研發等提升研發效率，大幅緩解資源瓶頸等等。下面會整體介紹一下淘系前端在今年雙11的思考和沉澱，希望對大家有所助益。後續也會有各個專項的系列文章，希望大家持續關注。
（更多幹貨內容可關注【淘系技術】公眾號）
變化 & 挑戰
今年的雙十一，首先感受到的就是源源不斷的變化。
單峰變雙峰：雙十一從之前的一個波段變成今年的兩個波段，大促的三個階段預售、預熱、正式也都對應的翻倍。首先帶來的是研發工作量的大幅增加，在時間排期不變、工作量增加、人員不變的情況高效的完成需求研發是第一重挑戰；其次面對6個階段的狀態變化，如何保持準確切換、穩定執行、體驗流暢是在雙峰期間要重點保障的內容；最後面對超過20天的超長作戰期，安全生產、人員狀態保持、快速反應都需要有強力的組織和機制進行保障。
圖：雙十一節奏
首頁大改版：最新的淘寶首頁首屏內容有顛覆性的變化，比如首屏內容簡化，推薦提前，頻道作為內容嵌入推薦等。各個業務在缺少固定的流量入口的情況下，包括運營策略、產品策略、設計方案、技術方案都需要積極調整。同時在各個場景的推薦能力也需要持續增強，今年雙十一通過將坑位數擴充套件到1000+，理論可達無限擴坑；通過智慧UI提升使用者點選率。
圖：手淘版本對比
業務變化：業務創新和新玩法層出不窮，包括mini詳情、旗艦店、價格表達、筆筆返、芝麻購等在內的很多業務都是全新的表達、顛覆式的升級。即是業務上新的嘗試，在技術上也要解決架構選型、對賬、一致性表達、排期等問題。
做好本職
首先要做的就是做好本職工作，保障需求研發和穩定性。需求研發方面，我們通過D2C實現了大部分UI模組自動開發、通過建設Eva互動體系降低互動研發成本、通過Serverless的一體化研發提升研發和運維效率，使前端不再成為資源瓶頸。穩定性上，也通過一系列機制和工具體系進行保障。同時增加一塊大家平時可能不太關注的資損防控的策略和方案。
D2C研發提效
去年雙十一我們設立了研發效率專項，核心就是通過 設計稿生成程式碼(Design to Code, D2C)平臺 Imgcook 來提升研發效率。最終在去年的雙十一大促會中承接了 78.94% 的新增模組程式碼自動生成，程式碼可用率達到 79.34%。
今年前端智慧化助力前端研發模式升級，數個 BU 共建前端設計稿識別演算法模型和資料集，設計稿生成程式碼技術體系全面升級，如對 UI 多型、直播視訊元件、迴圈的智慧識別增強等。今年雙十一會場承接了 90.4% 的新模組程式碼智慧生成，程式碼可用率達到 79.26%（對比去年升級設計稿智慧檢查能力，視覺稿無需人工輔助調整）。得益於D2C的研發提效，今年並沒有出現往年借調資源投入會場開發的情況。相比傳統模組開發模式，使用設計稿生成程式碼技術後編碼效率（模組複雜度和研發耗時比值）提升68%，固定人力單位時間模組需求吞吐量增加約 1.5 倍。
圖：D2C操作流程
互動研發升級
在電商領域，互動是一個重要的使用者增長方案，在提升使用者黏性、活躍以及拉新上都發揮著重要的作用。今年雙11，淘系互動團隊推出了“超級星秀貓”，我們不蓋樓、不開車，全民參與養貓出道，3只風格各異的萌貓咪一經問世，瞬間俘獲了無數消費者的心。通過 EVA 互動體系一整套解決方案，大幅提升研發效率，支撐全民養貓貓在手淘、貓客、支付寶等多個 APP 互通。藉助客戶端能力及 EVA 互動體系將效能與記憶體良好控制，讓多數使用者體驗高清穩定的互動，實現 0 故障及秒開，同時星秀貓參與人數再創新高。後續的系列文章將具體闡述淘系互動前端團隊是如何做到雙11互動又快又好又穩，內容涵蓋互動基礎、EVA研發體系和全域性穩定性方案3個方面。
圖：互動效果圖
Node FaaS一體研發
Serverless雲+端研發模式通過打通頁面程式碼和服務程式碼進行一體研發，使得前端可以從前臺頁面到後端服務完整支撐，節省中間溝通和聯調成本。在天貓榜單以及V榜的落地，使得雙11 Node FaaS 相關業務整體研發效率提升38.89%。行業導購雙十一需求也在雲+端的新模式下支撐外包快速入場，使得整體提效約20%。
穩定性保障
穩定性保障貫穿從專案啟動到結束的整個雙十一週期，下面從幾個重點方面進行簡單的介紹：
變化評估：每年的雙十一都是站在巨人的肩膀上，都經過了上一次雙十一的考驗。主要的風險就變成新增的部分以及變化的部分，這裡的變化既包括技術上的變化也包含人員上的變化。要做到對變化的充分評估，在99大促進行驗證，並且保證99大促後不再進行變化，以一個穩定的狀態迎接雙十一。
壓測：首先要進行流量評估，借鑑去年資料的同時結合今年的變化，進行相應的機器、頻寬等資源準備。完成單線路壓測，保證在預估流量模型下，自己的服務和上下游都能夠運轉正常。進行全鏈路壓測，核心驗證在0點高峰時各業務併發的情況的運轉情況，尤其是一些底層公共服務，以及優先順序的保障情況。
兜底&預案：兜底一般指在大流量或其他不可控因素的情況下，如何將使用者體驗和業務損失降低到最小。預案需要評估可能遇到的各種情況，以及對應的處理方案。
驗收：功能預演，按照使用者的所有使用路徑進行操作，目前這個工作仍是人工。時間穿越，將頁面和系統的狀態都調整為活動時間來驗證，需要打通上下游的各個系統並形成聯動。機型驗收，基本分為高階機、中端機、低端機，分別進行驗收，很多業務都需要針對低端機做功能降級。穩定性驗收，單獨頁面的效能和穩定性各自保障，但業務疊加後很可能存在問題，尤其像會場、互動、直播、旗艦店等記憶體消耗大戶，互相之間都有引流，切換後很難保證，需要整體全鏈路驗收。
變更&應急：歷次的故障資料表明，大部分的問題都是由於變更導致的，如何做好變更管控尤為重要。根據時間分為弱管控、強管控期；根據業務等級分為集團核心應用、BU核心應用、非核心應用等；建立變更的CR和審批的機制。應急主要指在核心活動期間，問題、輿情、故障等流轉機制，針對問題發現、定位問題、修復問題時間作出要求，不同等級如何決策作出安排。
監控：淘系前端持續進行監控能力的建設和升級。需要保障大促高峰的可用性以及報警的實時性，覆蓋所有的業務場景。針對越來越複雜的場景，需要端到端的監控和資料分析平臺。灰度過程缺少度量和定點監控。根據這些問題和需求，jstracker提供了安全生產的整體解決方案，打造端到端的前端監控與資料分析平臺，打造實時監控、多端覆蓋、資料分析、智慧化的資料平臺。同時根據頁面情況、錯誤日誌、源站資料、FaaS日誌等打造了雙十一的前端資料大盤。
資損防控
一直以來前端資損防控是平臺非常薄弱的一環，前端觸發的資損和輿情問題不在少數。之前全靠開發同學的經驗和意識來保證，缺少體系化的資損防控能力。去年開始組織了團隊層面的集中篩查和人工預演，對人力和時間的消耗非常巨大，並且很難保證質量並進行積累和沉澱。所以為了能有一種成本更低、預防效果更好的方式進行資損防控，2020年 S1 伊始，就重點對資防做相關產品化的設計和實現。同時今年也重點增加了商家、運營中後臺側的資損防控。
我們將資損防控氛圍了三個階段，研發階段、操作階段、執行階段。研發階段給存在資損風險的倉庫打標，將常規的價格、優惠、預設文案等case進行列舉，通過靜態掃描、UI測試用例掃描等方式進行防控。操作階段，主要是指商家、運營進行優惠、權益等設定的階段，通過表達方式統一（避免5折、0.5折造成理解差異）、二次確認、限定邊界值、低價預警等進行防控。執行階段有快照對比、服務端資料對賬等方式，執行階段的防控相對滯後，發現時很大概率已經造成實際的影響。
然而，目前仍是預防為主，不能百分之百保障沒有資損故障發生，接下來我們還在構思鏈路級別的、生產環境上的防控手段，建設一些告警和自動止血為平臺保駕護航。
業務價值
做好本職的基礎上，我們希望給業務帶來增量價值。本章從會場效能優化提升轉化、基礎鏈路新方案提升轉化、喚端技術定製策略提升精準率、智慧UI為不同人群提供不通過UI提升點選等4個方面來介紹。
效能提升
會場是每年雙十一的主角之一，會場的使用者體驗自然也是每年最關注的點。在日趨複雜的業務需求下，如何保障我們的使用者體驗不劣化甚至能更優化是永恆的命題。今年分別使用了預渲染方案和SSR方案進行優化，首先是重新定義了秒開的標準，從原來的前端時間升級到從使用者點選經過跳轉到頁面可視的時間，增加了客戶端路由、webview啟動等時間，使體驗的衡量更貼近使用者真實的體感。覆蓋了包括主會場、行業會場、外投會場等數十個場景。
預渲染
預渲染是在今年雙11會場中使用的技術方案，用於提升使用者開啟會場的體驗。將原有H5頁面渲染流程中的WebView的初始化、頁面資源載入、部分JS的執行等耗時的操作，提前執行，在離屏狀態下完成頁面“渲染”。當使用者真正點選進入會場的時候，複用這個提前“渲染”的頁面，大大節省開啟會場的時間。使用者開啟會場的整體平均耗時縮短了200ms~700ms左右，秒開率提升10%-14%。優化對中低端機絕對收益更高，已實現在低端機上實現秒開會場。讓使用者逛會場體驗更流暢了，尤其中低端手機效果更加明顯。在後續的文章也會講述包括預渲染、資料快照、並行請求等效能優化方面的實踐與思考。
圖：中低端機型預渲染效果對比圖
SSR
今年在不改變現有架構，不改變業務的前提下，在會場上使用了 ServerSideRendering 技術，將秒開率提高到了新的高度（82.6%）；在使用者體驗得到優化的同時，業務指標如點選率等也有明顯的增長，帶來了不錯的業務價值。後續的系列文章匯中會詳細介紹前端在解決工程化、業務效果評估上的具體實踐與方法論；服務端在解決前端模組程式碼於服務端執行、隔離和效能優化上的思考和方案。
圖：中低端機型 SSR 效果對比圖
基礎鏈路
基礎鏈路是電商核心的鏈路，包含首頁、商品詳情、微詳情、交易（下單、訂單、購物車、支付成功）、資訊流、我的淘寶等基礎業務。現有的技術方案是手淘內使用Native版本，追求極致的體驗和穩定性；站外流量、包括支付寶在內的阿里系App使用H5版本，追求靈活性和可用性。隨著支付寶容器化體系的完善，在其他App中的內聚，基礎鏈路新的容器化版本具備了孵化的土壤；同時H5的一些弊端，比如資源都在遠端、Native能力使用限制等也可以得到優化。
藉助之前的“新奧創”和“DinamicX”方案（主要解決業務定製以及安卓、iOS、H5的三端一致，實現一處開發、三端生效），容器化版本得以快速擴充套件，實現四端一致。效能資料上，載入時間對比H5版本有2s的提升，基本達成秒開的目標；業務資料上，容器化版本對比H5版本UV轉化率提升70+%。
目前已覆蓋支付寶、特價版、優酷、高德、淘小鋪、一淘等App，以及通過百川SDK整合在眾多外部媒體App。業務上也接入了每日必搶、大牌直降、淘寶特價、淘寶直播、百川媒體、優酷、小鋪、輕店、花唄等業務。
喚端技術
隨著流量見頂、電商大戰進一步升級，如何做好使用者增長是各大公司必須完成的命題。使用者增長涉及的面非常廣泛，今年淘系前端聚焦在喚端技術，即外部流量拉起手淘App的技術體系。喚端技術的門檻很低，簡單到只需要拼一個類似 URL 的 scheme 就可以觸發喚端。喚端技術又很複雜，不同的渠道、不同的OS、不同的 App 都有可能針對喚端協議有限制，並有各種各樣的相容性問題；喚端鏈路中不同業務可能都有自己的業務定製需求，例如引數的透傳；喚端鏈路的效率更是被關注的核心點，不同場景不同業務在效率上可能都不一樣，因此還需要對喚端效果進行監測和對比。為了解決這些複雜的問題，我們在喚端技術上進行了又一次升級，建設了可定製的喚端策略，打造了詳細的喚端AB測試鏈路。從本次雙11 的效果看，不同場景下的喚端效率（喚端成功率）相對提升了 25~40%不等。
圖：喚端策略圖
智慧UI
隨著移動網際網路和推薦系統的發展，人和商品的精準匹配為業務帶來了效率的大幅提升。越來越多的精細化手段逐漸應用於個性化推薦領域，比如場景化推薦、人群定投技術等。同時商品的資訊比以往任何時候都要豐富（買家秀，品牌背書，無憂購服務等），不同的使用者對於內容的UI表達有著差異化的訴求，因此通過為不同人群找到合適的UI表達一定能帶來業務效果的提升。
專案的最早期，我們通過AB實驗直接定量測試，明確了相同的UI方案在不同的場景會產生差異，不同的UI方案在相同場景下也會產生差異。也就是說，針對不同場景使用不同方案是有意義的。2020年雙十一大促我們第一次大規模採用智慧UI產品化方案落地了多個前端模組，包括猜你喜歡模組、商品模組、店鋪模組等，覆蓋了雙十一的預售和正式開賣階段，承受了流量洪峰的考驗，且帶來了穩定的增長。覆蓋300多個會場，最高的會場PV點選率相對提升10%+。
技術升級
伴隨業界的技術演進和業務的發展，我們在技術上相比去年也有了新的嘗試和迭代升級，其中典型的包括FaaS的深度使用、PHA漸進式的體驗增強、邊緣節點渲染的應用等。
FaaS
Serverless，一塊深水的堅冰，逐步從深海付出了水面，阿里淘系從去年在大促實踐開始，逐漸將 Serverless 應用到前端領域方方面面。今年雙十一首先是在覆蓋場景方面，FaaS從淘寶行業擴充到會場和營銷業務，業務的複雜度得到極大的豐富。能力進一步提升，支撐的業務量級也從2k QPS提升到5W QPS，CPU水位從去年的高 QPS 規模時，精力花費降低約50%。在研發體驗方面，打造解決方案體系，單元保障、大促管控、專家系統、函式盤點等能力，運維提效約50%。在研發體驗方面，打造解決方案體系，降低研發門檻，支援外包快速入場。
PHA
PHA 全稱 Progressive Hybrid App，是提升 Hybrid 體驗的一種應用框架。提升頁面載入速度和互動體驗的漸進式 Web 應用，使用 PHA 開發的應用本質上沒有脫離前端開發和 W3C 標準，但依然擁有原生應用的特性和體驗。或許你有想到 PWA，但 PHA 有比 PWA 更強的 UI 能力和更快的載入速度。目前已經在手淘、特價版、Lazada、CBU 等多個客戶端落地，支援了618、雙11等多個大促。PHA聯合客戶端、前端團隊、資料分析團隊，跨棧協同，在效能優化方向上也做了很多優化工作，梳理全鏈路效能埋點、定義新的效能口徑（從使用者點選到可視），使用了預載入、預渲染、資源加速下載、離線資源等優化手段。
ESR
現在的渲染節點主要是在終端或是服務端，對應CSR（Client Sider Rendering）和SSR（Server Side Rendering），分別有適用的場景以及優勢和弊端。現在藉助阿里雲的能力可將渲染轉移到CDN節點，也就是我們要介紹的ESR（Edge Side Rendering），即能為前端提供渲染能力，同時也能將大量CDN機器上的計算資源利用起來。
阿里雲推出了CDN輕量程式設計環境——EdgeRoutine，這為我們提供了一個新的嘗試方向。我們可以在CDN節點去做提前渲染的事情。CDN的訪問策略是會去尋找離使用者最近的節點，就像快遞運輸的最後一公里一樣，總會派送到離客戶最近的分撥點。這麼看來頁面的網路排程時長是非常有優化空間的。並且我們還可以利用CDN節點資源共享的特性，將部分資料快取到CDN節點上，減少遠端的資料請求。
這套方案對於資料重新整理率不高、訪問量極大的頁面，ESR搭配CDN的快取能力是非常適合用的。以達人頁為例，首屏時間約能提升50%左右。現在ER的技術才剛剛起步，應用場景比較侷限，能力上還有很多不足，體系也需要不斷地建設，但這個新技術為前端提供了更多可能，需要我們不停的去探索和完善。
雙十一PM初體驗
雙十一作為電商年度最核心的節日，各方面投入的力度和資源都是最大的。作為參加過8次雙11的老兵，作為前端PM是第一次，有很多不一樣的感受。
複雜：首先是業務上，有雙十一定製和特有的主會場、主互動、貓晚等，還有淘系內部本身就有導購、行業、營銷、直播等數十個業務，同時聯動支付寶、優酷、本地生活、阿里媽媽、菜鳥等多個集團BU，與商家、ISV、物流、媒體等的協同和合作。技術上同樣複雜，前端的頁面從開發、搭建、源站、CDN的全部鏈路，以及Node FaaS的容器、中介軟體、容量準備、流量調配、機房部署等。管中窺豹，對於整個體系的認知還需要更進一步的探索。
流程：雙十一作為電商業務每年的大考，已經摸索出一套成熟的流程機制。包括人員的組成、溝通機制、時間排期、組織保障等各個方面都有很細緻的機制進行保障。
協同：雙十一是非常好的節點，可以讓各團隊、各崗位、各BU之間形成聯動，集中力量將如此龐大的體系進一步完善。很多技術的升級和突破都是在雙十一落地並進一步推廣的。這次預渲染的方案就是客戶端和前端緊密協同，在很短的時間內實現並驗證的。
多維：看問題的視角可以更多維，不同技術崗位視角，全鏈路視角，業務的視角。以一次變更的審批為例，之前更多關注變更的程式碼實現上，對上下游的影響、對穩定性的影響、對業務的影響、是否引入新的風險、影響的範圍等等都需要進行綜合衡量，做一個判斷往往需要從中進行取捨，而不單單是技術上的1和0。
招兵買馬
最後的最後，招聘貼！
淘系前端由淘寶前端、天貓前端、手淘前端三大前端團隊融合而成，在業務上負責淘寶、天貓的所有業務，如：雙11&雙12大促、聚划算、天貓新品、有好貨等營銷導購產品、淘寶直播&短視訊業務、商業千牛以及開發、使用者增長、互動&遊戲等等，囊括了新零售域下最複雜、最多形態的業務場景；在技術上在前端工程、多端架構、Node架構、互動架構等基礎體系上有著深厚的沉澱，同時在多媒體、前端智慧化、雲手機等新興體系上佈局&發展，在搭建&投放、小程式開放、工作臺等應用體系上直接助力業務。
郵箱：taobao-fed-zhaopin@list.alibaba-inc.com
職位：前端開發專家-杭州/北京、端架構 TL、前端技術專家（IDE方向）、前端技術專家（Node.JS）、互動技術專家、Web多媒體領域專家-杭州/廣州、雲手機解決方案架構師、中後臺領域架構師、使用者增長領域專家、投放技術高階專家、軟硬體技術專家、開發者平臺產品經理。