作者：魏扼(文射)、範磊(蓄能)
近年來東南亞數字經濟持續發展，Lazada在買家和商家數量上繼續保持了強勁的持續增長態勢。2020年的11.11有超過4000萬個消費者、超過40萬的商家和品牌來到Lazada平臺，今年11.11當天有超過80萬品牌和商家參與，Lazada 越南首小時同比去年銷售額翻番，Lazada 新加坡首小時銷售額較平日增長10倍！
一連串業務資料爆漲的背後，是流量的快速增長，容器作為H5業務的承載，也服務了越來越多H5業務：會場、Flash sale，Lazmall、錢包等等，因此，H5頁面的使用者體驗受到更大的挑戰。
在過去一年裡，Lazada容器團隊深耕H5容器優化，在面對線上弱網使用者佔比高，低端機型分佈廣等情況下，我們採用預渲染方案針對性優化了大促會場頁面，首創性運用預熱方案優化日常GCP頁面和ICMS頁面，同時對頁面資料進行預取，靜態資源提前快取等方案，對頭部H5頁面流量業務進行深度優化，最終提升H5業務的使用者體驗及業務轉化。
問題分析
2020 D11大促當日，會場錄屏首屏時間9383ms，使用者體驗十分糟糕，大部分使用者無法忍受而直接退出頁面，導致流量流失嚴重。
先分析我們開啟會場頁面的完整鏈路，包括如下階段：
整個流程任務繁重，網路開銷大，導致頁面渲染被拉到非常晚，首屏時間長也就不奇怪了。
再分析線上使用者的網路和使用者機型的分佈情況，如下圖所示：
從上圖可以看到線上大盤使用者行動網路佔比高，低端機型佔比大，特別是印尼使用者，行動網路穩定性情況更差，低端機型佔比突出。那麼針對低端機型以及弱網使用者的優化成為我們重點攻堅方向。
優化方案
監控體系建設
工欲善其事必先利其器，線上使用者距離我們非常遙遠，他們的真實情況是怎樣的，我們很難體驗到。那麼只能從監控著手，對頁面載入的各環節進行埋點上報，從詳細的資料來衡量使用者真實體驗情況。對此，我們將H5頁面的載入環節進行了劃分，具體參考如下：
包括路由、容器建立、頁面載入、頁面渲染、使用者退出等環節，對每個環節進行埋點，將頁面載入狀態，時間點、本環節耗時等資訊上報到DP2和UT，並建立實時監控：
路由和容器初始化監控
頁面載入監控
首屏時間監控
容器預熱：空間換時間
會場頁面由GCP平臺搭建出來的，分析發現每個頁面都會執行相同的js，每個頁面只有少量的業務js執行和渲染，經過討論和驗證，把公共的基礎js抽象出來，和業務js隔離，在使用者開啟頁面前就將這些資源提前載入到webview中，一方面減少使用者點選後頁面需要載入的資源，一方面提前對公共js、css進行了解析和預處理。
預熱方案上線後，首屏時間降到2s內，BDay預熱命中率36%，通過埋點分析，發現預熱文件載入存在以下問題：
- 使用預熱容器時, 預熱任務未啟動, 主要是喚端場景；
- 預熱未完成，預熱耗時較長平均耗時5000+ms，或者預熱失敗；
- 使用預熱容器時, 預熱任務啟動, 但是前端沒有回撥預熱完成, 而程式存在保活機制, 一旦第一次沒有回撥, 預熱webview可能一直不會被使用, 也不會重啟預熱任務, 除非重啟程式；
- 命中了預熱容器, 前端未回撥首屏, 導致不會再次建立新的預熱容器, 下次啟動頁面無法命中；
- 未匹配預熱規則。
預熱時間提前
針對預熱文件載入耗時的問題，我們把預熱時機提前到首頁可互動後，儘可能早地開啟預熱頁面的載入，同時我們將主文件資源通過ZCache提前快取到本地，減少網路傳輸。
預熱重試機制
預熱啟動時機在首頁可互動，預熱完成後，前端會通知客戶端預熱完成事件，使用者開啟一個Web頁面時，會判斷是否預熱完成，完成了才會去使用。這中間可能就會存在預熱失敗的情況導致客戶端沒有收到預熱完成的通知。另外在開啟一個Web頁面完成上屏之後，前端會回撥一個首屏通知，此時會觸發預熱一個新的WebView，通過資料分析，發現部分使用者沒有收到首屏通知，導致下一次開啟頁面無法命中預熱。
針對上述情況，我們提出了預熱重試機制來提升預熱的命中率。主要是兩種預熱重試的場景, 第一種是首頁閒時預熱重試; 第二種是開啟頁面後預熱重試，定義超時時間，預設為10s，超時時間到了之後會檢查是否完成預熱，沒有完成預熱則會觸發一次新的預熱，最多重試次數為3次。具體流程如下圖：
預熱連結匹配
通過分析線上資料，發現某些GCP頁面預熱命中率為0，原因是命中預熱需要匹配Web頁面的連結與預熱的主文件連結，需要Web頁面連結的host和path與預熱主文件的host和path要完全一致，但是由於種種原因，線上會存在host和path與預熱主文件的不一樣，導致無法命中預熱。針對這種情況，通過Orange配置下發正則匹配規則，頁面連結只要匹配上了規則就可以使用預熱容器，而不只是匹配單一的預熱主文件連結，同時配置統一整合了GCP頁面和ICMS頁面。
匹配規則示例：
prehot_regex={"id":[{"url":"https://pages.lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr"}],"my":[{"url":"https://pages.lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my"}],"sg":[{"url":"https://pages.lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg"}],"ph":[{"url":"https://pages.lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render"}],"th":[{"url":"https://pages.lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th"}],"vn":[{"url":"https://pages.lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn"}]}通過一系列優化，我們大盤GCP頁面和Flash sale頁面預熱命中率提升到60%左右，主會場預熱命中率接近70%。
容器預渲染：極致使用者體驗
為了進一步極致的提升使用者體驗，達到真正的直出效果，我們針對大促會場做了一個預渲染的前置動作，通過和首頁模組的通訊互動，容器端和前端的事件通訊、上報遮蔽、流量控制等，提前預渲染會場頁，在真正上屏的時候瞬開會場，此時整體會場自定義首屏時間就是趨於0。
優化前後錄屏效果，請點選檢視：Lazada 容器深度優化之旅
錄屏中優化前的是去年雙十二期間頁面，優化後使用的是BDay期間的頁面，頁面結構有變化，但載入的資源量級相當，從錄屏效果看，優化後的體驗，無論是預熱還是預渲染比優化前都有質的提升。
對於預渲染，我們已經在後臺完成了頁面的載入和渲染操作，理論上應該是隻需要合成上屏即可，但是錄屏中有看到白屏過程，通過視訊分幀可以看到，進場動畫的時候確實是白屏狀態：
通過實驗，對比其他頁面(如https://www.baidu.com) 命中預渲染的效果，發現它並沒有白屏的過程。這中間的區別在於，會場頁面上獲取預渲染容器的同時，會傳送一個上屏事件給前端，前端再去做一些軟重新整理等任務，這個軟重新整理任務會有業務js執行，導致阻塞了核心渲染流程，我們將上屏通知非同步延遲後，中間白屏時間就少很多，錄屏效果請點選檢視：Lazada 容器深度優化之旅
在7.7大促期間對會場頁面做測試，對比從點選到首屏的耗時，資料如下：
延遲上屏通知情況下的錄屏耗時優化了12%，使用者體感會有較大提升。
SSR：喚端效能提升利器
預熱/預渲染可極致優化使用者從首頁進入會場的體驗問題，但是線上還存20%-40%使用者是通過喚端冷卻直接進入到會場落地頁，這種情況下，是沒有足夠時間來進行預熱和預渲染的，所以提升喚端頁面載入速度是一個亟需解決的問題。
從前端角度來分析，頁面載入分為幾個步驟：主文件載入、核心js載入、資料請求、頁面渲染、上屏展示、圖片請求展示，這幾個步驟都是序列的，涉及到大量資原始檔的網路傳輸和js解析執行。通過和前端同學討論, SSR是一個潛在的優化方案，將資料在服務端就召回並解析渲染成靜態HTML，那就只需要下載一個主文件就能進行上屏展示，加上圖片請求展示，就只需要兩輪資料互動，從客戶端角度看，減少了3個資料互動環節，大大降低了資料傳輸量和連線請求次數。
會場SSR方案
SSR與非SSR對比視訊，點選檢視：Lazada 容器深度優化之旅
SSR渲染優勢：
1、降低首屏資源數量和傳輸量級；
2、減少客戶端解析執行業務js時間開銷；
3、在客戶端內採用MTOP方式請求，避開了安全保鏢的問題和個性化推薦的問題。
在相同環境下(同手機、同頁面、同App、同網路環境)進行測試，發現端內開啟頁面場景使用SSR能夠優化15.2%的首屏時間，喚端場景使用SSR能夠優化28.1%的首屏時間。具體測試資料如下:
實測資料：
標準化
首屏時間標準化
一方面對齊集團的可互動首屏時間：前端完成渲染時間，部分業務域採用UC T2時間，優勢是全部業務統一，缺點是非UC核心無法採集，一方面增加更接近使用者體驗的滿屏首屏時間：首屏資源全部載入完成，包括js、css以及圖片資源。
使用者體感可量化——白屏檢測
首屏時間可衡量大部分正常載入完頁面的使用者的體驗，但還是有很多使用者在首屏完成前就退出了頁面，或者頁面載入發生錯誤，這類case不能體現在首屏時間內。所以客戶端增加了統一白屏檢測能力，利用動態配置檢查當前頁面元素內容，使用者離開頁面時（包括切後臺、退出、跳下一頁），頁面上是否真實存在內容監控使用者可見的白屏狀態。
預渲染和預熱容器標準化
建立一套前端和客戶端的標準對接協議，客戶端通過配置平臺按照配置，以及當前app記憶體水位載入對應的ROCKET容器，容器後臺預載入主文件，業務資源，同時監控後臺異常曝光等資料。前端對上報進行攔截，雙端約定標準的渲染互動jsapi，以及上屏更新通知等，客戶端負責統一的記憶體卡口和渲染時機。
總結和展望
經過一年時間的深度優化，在Android平臺，2021 D11會場首屏時間比2020 D11提升50%，IOS首屏時間進入秒開時代；印尼機房真機錄屏資料顯示，預熱場景下主會場首屏時間比競品Shopee快1倍，非預熱場景會場也比競品Shopee快24.8%。
展望未來，我們將繼續從機型系統，記憶體分配，以及Webview核心的特性等多維度最大粒度的利用效能優化容器，最小的影響app的執行穩定性，同時深度優化WebView核心裡圖片等資源的載入失敗和耗時等一些列問題，打造一個穩定且極致體驗的H5容器。
我們招聘啦！
簡歷投至方式：haofei.yu@lazada.com
Lazada創立於2012年，在東南亞印度尼西亞、馬來西亞、菲律賓、新加坡、泰國和越南六國擁有超過8000萬活躍消費者，且擁有該地區競爭力優勢明顯的物流和支付網路。 作為阿里巴巴東南亞旗艦電商平臺，在利用阿里巴巴先進成熟的產品技術快速提升海外本地電商能力並幫助阿里生態迅速發展海外業務的同時，我們基於阿里已有平臺抽取出一套國際化的全鏈路系統，從無線手機端到交易鏈路，從商家業務到大資料和推薦，打造全新的端到端國際電商作業系統。
在這裡你不僅有機會了解商品、交易、會員、營銷等核心平臺，而且有機會接受極具前瞻性的海外電商業務的挑戰，並且需要針對多國場景進行業務抽象和平臺剝離，任務的新穎性和挑戰性都是前所未有的。我們在招的崗位包含產品、架構師、開發、測試、前端等多種機會，業務涉及電商端到端的所有環節，只要你自信，有能力、有激情，一定可以找到吸引自己的新挑戰。加入Lazada，和我們一起激盪東南亞市場，共創國際化電商！
關注【阿里巴巴移動技術】微信公眾號，每週 3 篇移動技術實踐&乾貨給你思考！