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

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

變化 & 挑戰(zhàn)

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

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

圖：雙11節(jié)奏

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

圖：手淘版本對(duì)比

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

做好本職

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

? D2C研發(fā)提效

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

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

圖：D2C操作流程

? 互動(dòng)研發(fā)升級(jí)

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

圖：互動(dòng)效果圖

? Node FaaS一體研發(fā)

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

? 穩(wěn)定性保障

穩(wěn)定性保障貫穿從項(xiàng)目啟動(dòng)到結(jié)束的整個(gè)雙11周期，下面從幾個(gè)重點(diǎn)方面進(jìn)行簡單的介紹：

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

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

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

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

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

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

? 資損防控

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

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

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

業(yè)務(wù)價(jià)值

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

? 性能提升

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

預(yù)渲染

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

圖：中低端機(jī)型預(yù)渲染效果對(duì)比圖

SSR

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

圖：中低端機(jī)型 SSR 效果對(duì)比圖

基礎(chǔ)鏈路

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

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

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

喚端技術(shù)

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

圖：喚端策略圖

智能UI

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

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

技術(shù)升級(jí)

伴隨業(yè)界的技術(shù)演進(jìn)和業(yè)務(wù)的發(fā)展，我們?cè)诩夹g(shù)上相比去年也有了新的嘗試和迭代升級(jí)，其中典型的包括FaaS的深度使用、PHA漸進(jìn)式的體驗(yàn)增強(qiáng)、邊緣節(jié)點(diǎn)渲染的應(yīng)用等。

? FaaS

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

? PHA

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

? ESR

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

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

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

? 雙11 PM 初體驗(yàn)

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

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

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

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

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

招兵買馬

最后的最后，招聘貼！

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

?

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

總結(jié)

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

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