從Weex到Web，性能逆勢如何破局？

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雙11如絲般順滑的服務體驗背後，是技術團隊對性能優化不斷地探索嘗試、升級迭代。今年飛豬會場實現了主會場直出、重點會場秒開、整體會場體感優秀。本文中，飛豬前端技術專家太吾分享了飛豬在前端性能優化上面臨的挑戰及改進方向，詳解在端側預渲染、SSR、SnapShot、SPA、資源和數據預緩存及監控和診斷上的優化細節。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在前端開發領域，性能是一個永恆的話題。沒有最快，只有更快！它不僅僅代表着用戶體驗，更直接影響業務效果，業界流傳着一個共識：頁面加載時長每增加1秒，用戶就流失10%。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與去年雙11相比，今年飛豬會場的最大區別是從Rax0.6 on Weex到Rax1.0 on Web。因爲在上半年，基於開發成本、可維護性等一系列的考慮，我們將前端渲染引擎迴歸到WebView，頁面打開在強網絡環境和資源離線這兩種情況下，雖然加載體感幾乎一致，但Web首屏性能數據還有提升空間。且在Web端通用手段已用盡，需要重新探索優化方向。但項目組最終通過多職能協同，完成主會場直出、重點會場秒開、整體會場體感優秀。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今年雙11前端的目標之一就是，在性能方面，體感要超過Weex，數據也要超過Weex。"}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"面臨的挑戰"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲Follow阿里集團的主推方案，使用Rax1.0統一DSL，一碼多端支持H5、小程序和未來的Flutter，飛豬從618大促開始，就將會場渲染側全量切換到 Rax 1.0 Web 渲染，當時對於性能方面的優先級不是那麼高。之後，性能優化專項重啓，開始着手進行Web方面的優化研究，力爭提升雙11的用戶體驗。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"飛豬的會場模塊複雜，包括視頻、動畫、多Tab、長列表；接口RT高，且服務端已無優化空間；旅行行業特點，頁面依賴定位信息、用戶信息，拖慢首屏時間。所以如何保證會場可以更快地呈現給用戶是個嚴峻的考驗。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與此同時，雙11項目組對性能方面提出一個近乎苛刻的目標：比日常會場性能提高25%。在前端優化手段日趨穩定的情況下，還要進行幾百毫秒的優化，只能進入深水區。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"優化方向"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"面對這個目標，傳統意義的前端方面優化已經不足以支撐，於是我們聯合客戶端、服務端以及其他BU同學，進行了一場協同戰役。我們主要面向三個方向進行優化："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一是，與客戶端團隊合作，進行預渲染、離線包、Data-Prefetch等手段的落地和優化。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"二是，順應Serverless大潮，重啓營銷域SSR方案，將原本端側的壓力轉移到服務端上去完成。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"三是，在兼顧數據的同時，兼顧用戶的體感，做了兩種Snapshot的方案（接口緩存、HTML緩存）以及SPA方案。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下圖展示了所有會場所使用的優化手段："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/35\/35a9d02c606e406bc3c7a5fa01d8b157.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"所有會場所使用的優化手段"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主會場：爲了保證主會場的最佳體驗，使用客戶端提供的終極大招——預渲染。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主要會場：對於首屏沒有異步模塊的場景，使用SSR配合Data-Prefetch，提升用戶可見頁面時間。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"全部會場：因爲模塊基本沒有變化，全部會場使用HTML緩存類型的Snapshot方案，用戶可以更快瀏覽該頁面。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"底部重要會場：採用接口緩存類型的Snapshot方案，提升用戶瀏覽體驗。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有會場均通過統一渲染頁推送離線包和Data-Prefetch。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲保證分會場分別運營和頁面之間切換的流暢性，底部Tab五頁面之間使用類SPA方案，使頁面切換起來無縫銜接。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整體優化思路分析從整個渲染流程分析觸發，針對每個節點進行細緻的分析優化："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/71\/7155cb894c0fdac4d7f6dfe61bcdda10.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1  技術實施詳解：端側預渲染"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果不考慮可能帶來的Crash風險，這應該是提升最大的方案了。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在雙11大促的場景下，通過端控制開關，將下發的配置URL以“離屏”的方式初始化好容器並loadUrl，在上屏之前完成頁面的Rasterization（柵格化）。當用戶點擊頁面入口時，客戶端會直接將“準備好的Webview”推到前臺展示，頁面FCP從1~2s直接降到100ms以下，形成幾乎無感的打開效果。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"效果對比"}]},{"type":"image","attrs":{"src":"https:\/\/mmbiz.qpic.cn\/mmbiz_gif\/Z6bicxIx5naLA7WnD8LhwQ7XQOjBLia9RFSibdyKOGYAdNyiaJMJYk6UmdiaeB1Vq9yqicAaiauEeias9O8UPiaGWtHbSEQ\/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1","alt":null,"title":null,"style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/mmbiz.qpic.cn\/mmbiz_gif\/Z6bicxIx5naLA7WnD8LhwQ7XQOjBLia9RFTJibfEpXBpPiaqKWhianfCWktTBCHjeYNANxHkib5cV4GZxicQ0oU7j3Vgw\/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1","alt":null,"title":null,"style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"開啓預渲染（上）未開啓預渲染（下）"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"方案流程圖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在客戶端通過配置下發的方式初始化WebView，並通過內存管控保證APP的穩定性，同時在展示邏輯上和前端配合，保證數據的一致性，最終通過釋放後續的一系列處理管理多次訪問的情況。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/97\/973c9f4a2a23091aaaf6af595bf8d5ef.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2  技術實施詳解：SSR（Server-side render or Serverless-side render）"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"披荊斬棘的戰士，帶着榮光歸來。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"SSR中文名：服務端渲染，是將渲染的工作放在服務端進行，在 Ajax出現之前全部是這種方式，由服務端返回給瀏覽器完整的 HTML 內容。在傳統BFF架構時期，這種方式逐漸消失。但藉着Serverless大潮，當Faas遇上SSR，又迸發出新的火花。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今年3月，狼叔在《前端新思路：組件即函數和Serverless SSR實踐》中，將SSR的概念升級，從傳統意義上的Server-side render 升級爲 Serverless side render，基於FaaS環境，提供端側頁面渲染能力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"項目組通過兩個月的調研和開發調試，在國慶大促一個會場預演，在雙11的五個重點會場使用SSR，使機票會場性能提升50%，首屏可見時間減少1000ms+。 "}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"效果描述"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"SSR代表首屏即可視，相比CSR減少模塊加載以及頁面渲染，將可視時間大幅提前。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"方案流程圖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整體方案保證性能優勢以及改造成本小的前提，採取異步SSR方案，即將HTML放在接口中返回，在規避高低端機容器影響的同時，又可同時複用客戶端的離線以及數據預加載能力，還保證CSR到SSR的平滑切換。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cd\/cd44f52df93fa738e0704a636525366a.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3 技術實施詳解：SnapShot（頁面快照）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將用戶體感頁面可見時間繼續提前。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最初設計SnapShot是在非千人千面的場景下，多次訪問，更快的可見頁面。原理是將上一次訪問的 HTML 直接緩存在本地，用戶下一次進入頁面時，首先展示緩存的頁面。但後來發現，在雙11會場這種幾乎每天都會變陣的場景下，模塊的刪減以及順序的調整，都會使得從“緩存頁面”到“真實頁面”的過程中發生不可避免的閃動，而這種閃動是難以接受的。於是我們重新設計出接口緩存的方式，配合模塊緩存，實現與之前效果相同，但避免閃動的方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同時，我們發現 HTML 緩存的方式也並非毫無用武之地。雙11會場上線前，針對所有會場進行 Review 優化手段，發現在全部會場場景下，會場基本無變化，使用HTML緩存的方式簡直再合適不過，於是我們將使用Snapshot 的頁面分爲兩類，達到所有頁面都快且完美地呈現給用戶。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"效果描述"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開啓Snapshot後，整體頁面無Loading，基本達到頁面的直出效果。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4  技術實施詳解：SPA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"完成用戶體感的“最後一公里”，多頁面間跳轉實現無感知。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"各分會場需要進行分別運營，通過底部Tab包框將多頁面聚合，展示成一個頁面，通過點擊Tab進行切換，但頁面之間的跳轉造成的割裂體感一直被詬病。本次升級完成了類SPA的方案，將Tab中的頁面數據請求後，直接渲染成真實的Dom，切換通過Display的方式，基本在高端機上實現了將多頁面聚合成單頁面，多頁面間跳轉無感知，給予用戶最好的體驗。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"效果描述"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從多頁面之前的replace操作，頁面跳轉中出現白屏，到目前頁面中DOM的替換，用戶體感大幅提升，也取消了用戶點擊Tab卻跳頁面割裂的感覺。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"方案流程圖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"搭建頁面框架共用一套渲染引擎，且每個頁面的所有模塊通過Fetch獲取，每個模塊獨立發佈，且支持模塊拆combo後單獨緩存，非常適合SPA方案。同時項目組針對高低端機做了不同處理，在高端機上請求單Tab數據完成後，預加載其他幾個Tab數據，切換時直接取用，提供更好的體驗。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/63\/631920d910e0681294cb6420ff57b42b.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5  技術實施詳解：資源&數據預緩存"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最快的請求是不發請求。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"利用飛豬端側的Fcache\/DataPrefetch機制，結合總控配置下發通道，將頁面內的靜態資源主動下發到客戶端進行緩存，使用戶訪問頁面時無需請求靜態資源。此外，在頁面發起跳轉時，在端側提前觸發頁面的數據請求，減少接口請求等待時間。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Fcache方案 (資源緩存)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"會場的離線方案採用url+package的方式，在配置後臺錄入url後，後臺通過puppeteer去跑這個URL，把請求的資源緩存下來，其中還包括一些滾屏操作，把懶加載的資源也抓下來，最後通過通過讀配置去匹配資源緩存。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f1\/f191bb51f075f754faeff11129f06e7a.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"DataPrefetch方案 (數據預加載) "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數據預加載擁有三個狀態：Memory、Ongoing、Miss。我們認爲將請求放在客戶端發出一定會減少真實的請求時間，所以即使真實請求發出時，客戶端還未完成請求，只要key匹配，會等待客戶端數據，而不是重新進行一次請求發送。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ee\/ee78a6ef9bad0dd3a58d2696ddabfc19.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6  技術實施詳解：監控&診斷"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優化手段之餘，也需要對會場頁面的性能趨勢進行持續監控，對於異常Case進行排查。爲此，我們開發了實時的性能穩定性實時大盤、雙11會場小時級性能大盤平臺、耗時異常長的慢會話跟蹤小工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/8e\/8e0c290d46c06b766d2d4f49af906fb7.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"性能穩定性實時大盤"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"成果"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"飛豬端內雙11所有會場首屏可見時間達成既定目標，較日常會場首屏耗時環比降低 25%，較618以及國慶會場首屏耗時環比降低 20%。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d9\/d986f4499eb91db9b6e26236be79fe04.webp","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"雙11分組整體性能耗時趨勢圖"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"命中SSR的情況下首屏可見時間更是被拉入1s內，開啓SSR的會場在使用 Web後也可以重提秒開率，在業務頻繁變陣影響首屏模塊的基礎上，達到周整體秒開率 60%以上，機票會場秒開率75% 以上。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"技術規劃"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本次技術上有着很多新嘗試和迭代升級，在經過雙11的磨練之後，需要朝着更加易用和通用的方向發展，主要分爲以下幾個部分："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1  SSR方案優化"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"SSR在端內提供了巨大提升，首先需要完善同步方案，實現端外場景的提升。其次，在現有基礎上增加AbTest，來支持更有說服力的業務效果對比；最後優化SSR在服務端的執行速度以及彈性擴容能力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2  客戶端優化"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來會嘗試多Webview的Tab切換，接入PHA方案。並將更多的喚端情況列入優化方向，如冷啓動場景的專項優化"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"3  配套設施"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優化的背後離不開配套設施的支持，在現有基礎上支持卡口、巡檢、監控等功能，實現性能問題及時治理。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲一位前端開發工程師，擔任雙11會場性能PM，特別是對於今年從Weex到Web，性能水位重新被拉高，是挑戰也是機會。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在保障業務不受影響的前提下，確保用戶打開會場可以得到更快體驗。從頁面各階段的耗時分析，到藉助兄弟團隊能力，最終支撐雙11會場圓滿結束。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優化思路從整個渲染流程出發，秉承着緩存優先、壓力轉移、階段並行、端側深挖、體感優化五項原則，對各節點應用不同手段達成最終結果。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在整個過程中，通過應用大量的優化手段和創新方案，提高用戶的秒開率來側面幫助業務轉化提升；將預渲染、SSR逐漸落入更多場景，爲之後的全面性能提升做鋪墊；聯合客戶端、服務端，打破前端能力和邊界，進而探索性能深水區；提升性能數據提升的同時，兼顧性能數據監控，實時把控異常情況。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這種種優化手段肯定還不夠，之後首先會從單業務場景推廣到多業務場景，從單容器到多容器兼容，各業務、容器間進行方案的落地與反哺，最終期望可以完成全端性能標準統一。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後，爲明年雙11立個Flag：明年不再需要性能保障，而是在頁面生產出來的時候，就是滿足性能標準的！"}]}]}