今年雙11的整體節奏從之前的“光棍節”變為“雙節棍”，具體業務上也有很多變化和調整，應了阿裡的土話“唯一不變的是變化”。面對這些變化，是挑戰也是機會，我們要做的就是，“既要”高效支撐保障業務先赢，“又要”確定體驗和穩定性帶給使用者極緻體驗，“還要”追求創新讓前端持續演進。為了實作“既要、又要、還要”，包括技術方案、流程機制、人員組織等各方面都進行了大量的設計和保障。最終第一次雙峰的雙11圓滿結束，淘系前端也實作了自己的目标，包括應用大量優化手段和創新方案帶來業務轉化提升；将FaaS、PHA、ESR等技術應用在更多場景，分别向服務端、用戶端、CDN節點進一步拓展了前端的能力和邊界；應用視覺還原、一體化研發等提升研發效率，大幅緩解資源瓶頸等等。下面會整體介紹一下淘系前端在今年雙11的思考和沉澱，希望對大家有所助益。後續也會有各個專項的系列文章，希望大家持續關注。
變化 & 挑戰
今年的雙11，首先感受到的就是源源不斷的變化。
單峰變雙峰：雙11從之前的一個波段變成今年的兩個波段，大促的三個階段預售、預熱、正式也都對應的翻倍。首先帶來的是研發工作量的大幅增加，在時間排期不變、工作量增加、人員不變的情況高效的完成需求研發是第一重挑戰；其次面對6個階段的狀态變化，如何保持準确切換、穩定運作、體驗流暢是在雙峰期間要重點保障的内容；最後面對超過20天的超長作戰期，安全生産、人員狀态保持、快速反應都需要有強力的組織和機制進行保障。
圖：雙11節奏
首頁大改版：最新的淘寶首頁首屏内容有颠覆性的變化，比如首屏内容簡化，推薦提前，頻道作為内容嵌入推薦等。各個業務在缺少固定的流量入口的情況下，包括營運政策、産品政策、設計方案、技術方案都需要積極調整。同時在各個場景的推薦能力也需要持續增強，今年雙11通過将坑位數擴充到1000+，理論可達無限擴坑；通過智能UI提升使用者點選率。
圖：手淘版本對比
業務變化：業務創新和新玩法層出不窮，包括mini詳情、旗艦店、價格表達、筆筆返、芝麻購等在内的很多業務都是全新的表達、颠覆式的更新。即是業務上新的嘗試，在技術上也要解決架構選型、對賬、一緻性表達、排期等問題。
做好本職
首先要做的就是做好本職工作，保障需求研發和穩定性。需求研發方面，我們通過D2C實作了大部分UI子產品自動開發、通過建設Eva互動體系降低互動研發成本、通過Serverless的一體化研發提升研發和運維效率，使前端不再成為資源瓶頸。穩定性上，也通過一系列機制和工具體系進行保障。同時增加一塊大家平時可能不太關注的資損防控的政策和方案。
▐ D2C研發提效
去年雙11我們設立了研發效率專項，核心就是通過 設計稿生成代碼(Design to Code, D2C)平台 Imgcook 來提升研發效率。最終在去年的雙11大促會中承接了 78.94% 的新增子產品代碼自動生成，代碼可用率達到 79.34%。
今年前端智能化助力前端研發模式更新，數個 BU 共建前端設計稿識别算法模型和資料集，設計稿生成代碼技術體系全面更新，如對 UI 多态、直播視訊元件、循環的智能識别增強等。今年雙11會場承接了 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%。行業導購雙11需求也在雲+端的新模式下支撐外包快速入場，使得整體提效約20%。
▐ 穩定性保障
穩定性保障貫穿從項目啟動到結束的整個雙11周期，下面從幾個重點方面進行簡單的介紹：
變化評估：每年的雙11都是站在巨人的肩膀上，都經過了上一次雙11的考驗。主要的風險就變成新增的部分以及變化的部分，這裡的變化既包括技術上的變化也包含人員上的變化。要做到對變化的充分評估，在99大促進行驗證，并且保證99大促後不再進行變化，以一個穩定的狀态迎接雙11。
壓測：首先要進行流量評估，借鑒去年資料的同時結合今年的變化，進行相應的機器、帶寬等資源準備。完成單線路壓測，保證在預估流量模型下，自己的服務和上下遊都能夠運轉正常。進行全鍊路壓測，核心驗證在0點高峰時各業務并發的情況的運轉情況，尤其是一些底層公共服務，以及優先級的保障情況。
兜底&預案：兜底一般指在大流量或其他不可控因素的情況下，如何将使用者體驗和業務損失降低到最小。預案需要評估可能遇到的各種情況，以及對應的處理方案。
驗收：功能預演，按照使用者的所有使用路徑進行操作，目前這個工作仍是人工。時間穿越，将頁面和系統的狀态都調整為活動時間來驗證，需要打通上下遊的各個系統并形成關聯。機型驗收，基本分為高端機、中端機、低端機，分别進行驗收，很多業務都需要針對低端機做功能降級。穩定性驗收，單獨頁面的性能和穩定性各自保障，但業務疊加後很可能存在問題，尤其像會場、互動、直播、旗艦店等記憶體消耗大戶，互相之間都有引流，切換後很難保證，需要整體全鍊路驗收。
變更&應急：曆次的故障資料表明，大部分的問題都是由于變更導緻的，如何做好變更管控尤為重要。根據時間分為弱管控、強管控期；根據業務等級分為集團核心應用、BU核心應用、非核心應用等；建立變更的CR和審批的機制。應急主要指在核心活動期間，問題、輿情、故障等流轉機制，針對問題發現、定位問題、修複問題時間作出要求，不同等級如何決策作出安排。
監控：淘系前端持續進行監控能力的建設和更新。需要保障大促高峰的可用性以及報警的實時性，覆寫所有的業務場景。針對越來越複雜的場景，需要端到端的監控和資料分析平台。灰階過程缺少度量和定點監控。根據這些問題和需求，jstracker提供了安全生産的整體解決方案，打造端到端的前端監控與資料分析平台，打造實時監控、多端覆寫、資料分析、智能化的資料平台。同時根據頁面情況、錯誤日志、源站資料、FaaS日志等打造了雙11的前端資料大盤。
▐ 資損防控
一直以來前端資損防控是平台非常薄弱的一環，前端觸發的資損和輿情問題不在少數。之前全靠開發同學的經驗和意識來保證，缺少體系化的資損防控能力。去年開始組織了團隊層面的集中篩查和人工預演，對人力和時間的消耗非常巨大，并且很難保證品質并進行積累和沉澱。是以為了能有一種成本更低、預防效果更好的方式進行資損防控，2020年 S1 伊始，就重點對資防做相關産品化的設計和實作。同時今年也重點增加了商家、營運中背景側的資損防控。
我們将資損防控氛圍了三個階段，研發階段、操作階段、運作階段。研發階段給存在資損風險的倉庫打标，将正常的價格、優惠、預設文案等case進行枚舉，通過靜态掃描、UI測試用例掃描等方式進行防控。操作階段，主要是指商家、營運進行優惠、權益等設定的階段，通過表達方式統一（避免5折、0.5折造成了解差異）、二次确認、限定邊界值、低價預警等進行防控。運作階段有快照對比、服務端資料對賬等方式，運作階段的防控相對滞後，發現時很大機率已經造成實際的影響。
然而，目前仍是預防為主，不能百分之百保障沒有資損故障發生，接下來我們還在構思鍊路級别的、生産環境上的防控手段，建設一些告警和自動止血為平台保駕護航。
業務價值
做好本職的基礎上，我們希望給業務帶來增量價值。本章從會場性能優化提升轉化、基礎鍊路新方案提升轉化、喚端技術定制政策提升精準率、智能UI為不同人群提供不通過UI提升點選等4個方面來介紹。
▐ 性能提升
會場是每年雙11的主角之一，會場的使用者體驗自然也是每年最關注的點。在日趨複雜的業務需求下，如何保障我們的使用者體驗不劣化甚至能更優化是永恒的命題。今年分别使用了預渲染方案和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年雙11大促我們第一次大規模采用智能UI産品化方案落地了多個前端子產品，包括猜你喜歡子產品、商品子產品、店鋪子產品等，覆寫了雙11的預售和正式開賣階段，承受了流量洪峰的考驗，且帶來了穩定的增長。覆寫300多個會場，最高的會場PV點選率相對提升10%+。
技術更新
伴随業界的技術演進和業務的發展，我們在技術上相比去年也有了新的嘗試和疊代更新，其中典型的包括FaaS的深度使用、PHA漸進式的體驗增強、邊緣節點渲染的應用等。
▐ FaaS
Serverless，一塊深水的堅冰，逐漸從深海付出了水面，阿裡淘系從去年在大促實踐開始，逐漸将 Serverless 應用到前端領域方方面面。今年雙11首先是在覆寫場景方面，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的技術才剛剛起步，應用場景比較局限，能力上還有很多不足，體系也需要不斷地建設，但這個新技術為前端提供了更多可能，需要我們不停的去探索和完善。
▐ 雙11 PM 初體驗
雙11作為電商年度最核心的節日，各方面投入的力度和資源都是最大的。作為參加過8次雙11的老兵，作為前端PM是第一次，有很多不一樣的感受。
複雜：首先是業務上，有雙11定制和特有的主會場、主互動、貓晚等，還有淘系内部本身就有導購、行業、營銷、直播等數十個業務，同時關聯支付寶、優酷、本地生活、阿裡媽媽、菜鳥等多個集團BU，與商家、ISV、物流、媒體等的協同和合作。技術上同樣複雜，前端的頁面從開發、搭建、源站、CDN的全部鍊路，以及Node FaaS的容器、中間件、容量準備、流量調配、機房部署等。管中窺豹，對于整個體系的認知還需要更進一步的探索。
流程：雙11作為電商業務每年的大考，已經摸索出一套成熟的流程機制。包括人員的組成、溝通機制、時間排期、組織保障等各個方面都有很細緻的機制進行保障。