變化 & 挑戰
今年的雙11，首先感覺到的就是源源不斷的變化。前端
單峯變雙峯：雙11從以前的一個波段變成今年的兩個波段，大促的三個階段預售、預熱、正式也都對應的翻倍。首先帶來的是研發工做量的大幅增長，在時間排期不變、工做量增長、人員不變的狀況高效的完成需求研發是第一重挑戰；其次面對6個階段的狀態變化，如何保持準確切換、穩定運行、體驗流暢是在雙峯期間要重點保障的內容；最後面對超過20天的超長做戰期，安全生產、人員狀態保持、快速反應都須要有強力的組織和機制進行保障。ios
圖：雙11節奏web
首頁大改版：最新的淘寶首頁首屏內容有顛覆性的變化，好比首屏內容簡化，推薦提早，頻道做爲內容嵌入推薦等。各個業務在缺乏固定的流量入口的狀況下，包括運營策略、產品策略、設計方案、技術方案都須要積極調整。同時在各個場景的推薦能力也須要持續加強，今年雙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 等多個客戶端落地，支持了61八、雙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做爲電商業務每一年的大考，已經摸索出一套成熟的流程機制。包括人員的組成、溝通機制、時間排期、組織保障等各個方面都有很細緻的機制進行保障。
協同：雙11是很是好的節點，可讓各團隊、各崗位、各BU之間造成聯動，集中力量將如此龐大的體系進一步完善。不少技術的升級和突破都是在雙11落地並進一步推廣的。此次預渲染的方案就是客戶端和前端緊密協同，在很短的時間內實現並驗證的。
多維：看問題的視角能夠更多維，不一樣技術崗位視角，全鏈路視角，業務的視角。以一次變動的審批爲例，以前更多關注變動的代碼實現上，對上下游的影響、對穩定性的影響、對業務的影響、是否引入新的風險、影響的範圍等等都須要進行綜合衡量，作一個判斷每每須要從中進行取捨，而不僅僅是技術上的1和0。
招兵買馬
最後的最後，招聘貼！
淘系前端由淘寶前端、天貓前端、手淘前端三大前端團隊融合而成，在業務上負責淘寶、天貓的全部業務，如：雙11&雙12大促、聚划算、天貓新品、有好貨等營銷導購產品、淘寶直播&短視頻業務、商業千牛以及開發、用戶增加、互動&遊戲等等，囊括了新零售域下最複雜、最多形態的業務場景；在技術上在前端工程、多端架構、Node架構、互動架構等基礎體系上有着深厚的沉澱，同時在多媒體、前端智能化、雲手機等新興體系上佈局&發展，在搭建&投放、小程序開放、工做臺等應用體系上直接助力業務。
網址：https://fed.taobao.org/
郵箱：taobao-fed-zhaopin@list.alibaba-inc.com
職位：前端開發專家-杭州/北京、端架構 TL、前端技術專家（IDE方向）、前端技術專家（Node.JS）、互動技術專家、Web多媒體領域專家-杭州/廣州、雲手機解決方案架構師、中後臺領域架構師、用戶增加領域專家、投放技術高級專家、軟硬件技術專家、開發者平臺產品經理。
✿ 拓展閱讀
編輯|橙子君
出品|阿里巴巴新零售淘系技術
本文分享自微信公衆號 - 淘系技術（AlibabaMTT）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。