Lazada D11 體驗升級技術實踐

語言: CN / TW / HK

擁有 6.8 億人口的東南亞市場正在經歷 爆發式增長,作為東南亞領先的電商平臺和阿里巴巴全球化戰略的重要增長引擎,Lazada 已成長為當地領先和增長快速的旗艦電子商務平臺,推動了東南亞數 字經濟基礎設施的進步,目前Lazada業務在東南亞印尼、菲律賓、泰國、馬來西亞、新加坡和越南等六國運營,員工來自全世界50個不同的國家和地區,實現了各國業務的同步推進,在買家和商家數量上繼續保持了強勁的持續增長態勢。

資料顯示 D11 當天有 超過800,000品牌和商家參與 ,Lazada 越南首小時同比去年銷售額翻番 ,Lazada 新加坡首小時銷售額較平日增長10倍 !這些增量數字的背後,離不開Lazada各個團隊、商家、品牌和使用者的共同努力,其中 無線技術團隊堅持資料驅動、技術賦能,高效穩定的支撐D11期間的多方購物場景,同時在啟動耗時、會場渲染、包體積和主鏈路體驗方面都有顯著的進步

去年我們已經進行了大量佈局優化等基本技術策略,在2021年我們將優化場景在一步下沉到更加細化的領域,結合“頁面合併和任務重編”對應用啟動進行了大幅優化,開展了針對低端機所進行的“全鏈路路由動態預請求”,為了進一步增強資料複用性也開展了“購物車增量更新”和“下單頁首屏預判”......連結針對Lazada 啟動、首頁、PDP、Cart、Checkout等基礎鏈路核心場景所進行的多方面體驗優化,形成了鏈路級別的使用者體驗再升級,量變的過程也勢必將引發質變的結果,最終提升整體的業務轉化效率.

啟動任務編排&懶載入

應用啟動作為使用者進入首頁的第一必經環節,啟動效能帶給使用者的體感很大程度決定了使用者接下來是否選擇繼續留存 ,因此對App的啟動優化我們一直是持續精進,同時隨著業務的不斷複雜以及可優化空間的逐漸壓縮,優化遇到的挑戰也是非常大,也經歷了不斷的探索。

應用啟動階段大大小小有幾十個任務,這些任務需要主執行緒進行排程並行,同時主執行緒自身也需要執行一些必須執行的任務,任務之間還有邏輯上的依賴和鎖依賴,因此我們將任務分成若干個組,組內並行可以達到最大併發效果,組間序列解決依賴問題,組和組之間由主執行緒進行同步排程,在任務併發和依賴之間達到平衡的排程框架。

啟動任務優化的宗旨就是要讓組內任務並行更快,減少主執行緒的佔用,讓主執行緒能夠更快地排程下一組, 因此每一組的啟動時長由組內的最長耗時任務決定,通過對任務進行編排,讓有邏輯依賴和鎖依賴的任務儘量不分在相同的組,基於這個原則我們通過systrace等工具對短板任務和鎖進行了進一步的梳理並進行了針對性優化:

  1. 對耗時過長任務進一步進行拆分,縮短任務在單組中的耗時;

  2. 儘量在保持依賴關係的前提下對下列使用loadLibrary鎖的任務進行分散編排,最大程度減少鎖競爭;

  3. 對耗時任務進行優化,對不必要在系統啟動階段使用的任務在可互動後初始化。

通過以上的優化策略,本期優化啟動時間相對去年雙11有較大幅度的改善,隨著優化的進一步進展,後續的啟動優化,需要有更多的積少成多的決心和耐心,不斷地引入新的工具、新的思想,結合線上資料的完善更加精確地進行治理和優化。

啟動頁合併

在啟動任務編排的基礎上,我們在啟動過程中可以觀察到,一次完整的啟動過程,APP會經歷Application的建立,閃屏頁Activity的建立,最後才是使用者真正看到的首頁Activity,即LazadaApplication.onCreate() -> EnterActivity.onCreate() -> MainTabActivity.onCreate()

如果將這兩個頁面合併為一個Activity,使用者啟動即首頁。在Activity內部通過View的轉換完成上述閃屏頁到首頁Activity的切換,那麼使用者就會減少一次Activity的建立及這個過程中相應的Binder呼叫,從而更快的展現首頁內容

最後, 新的啟動流程就由原來的三步演變為LazadaApplication.onCreate() -> EnterActivity.onCreate() 兩步,在EnterActivity內部,當啟動任務初始化完成時,通過contentView的轉換將閃屏頁替換為首頁內容 ,從而提升啟動速度,藉助實驗取樣節約了250ms左右的啟動時間。

全鏈路路由動態預請求

如何針對低端機弱網路進行定向性分析,並形成鏈路式而非單點式的優化策略 是我們2021年新的發力點, 全鏈路預載入專案是在全域性資源智慧排程上的一個嘗試, 通過定製更加靈活的排程策略來實現最大程度的 利用系統空閒資源,我們啟動該專案的核心目標也是: 通過靈活的前置任務排程,實現全鏈路的秒開體驗

  • 導航預載入 利用導航過程中的時間gap,提前載入下個頁面的資源。這部分節省的時間 不僅包含頁面切換耗時100ms-200ms,可能也包含頁面初始化的時間100ms-200ms(個別頁面已經實現了“初始化和網路載入同步化”)。

  • 閒時預載入 智慧排程:基於使用者行為預測,利用當前頁面空閒時間,提前載入 下個預測頁面的資源;強制排程:無行為分析,利用當前頁面空閒時間,提前載入下個配置頁面的資 源。

通過定義一套標準化解析排程框架不僅支援遠端配置的解析對映同時也支援本地任務的遠端排程,最終在業務無侵入的特性下實現全鏈路的路由請求。

通過前置請求加速網路請求過程 PDP場景優化110ms, Cart(from PDP)場景優化230ms, 下單頁優化110ms,使用者核心購物鏈路預計節省450ms。

購物車非同步重新整理增量更新

不同於頁面開啟場景:在二刷場景中 端側的檢視構建和渲染基本不會有時間消耗 ,Android和IOS都是有成熟的View複用機制, 目前桎梏二刷使用者體驗的核心問題在於網路耗時過程 ,從監控資料也能看出介面的Api-totalTime耗時平均就需要1200ms左右。引發二刷網路耗時的原因有兩個:

  1. 全量更新導致服務端必須在update中進行全頁面元素的重新計算(Trade基於集團奧創中介軟體協議);

  2. 全量資料返回引發資料的傳輸和解析過程都會更加耗時。

因此初步的解決方式是:針對二刷場景 服務端僅返回需要增量更新的資料元素,客戶端藉助上次資料進行本地增量合併更新 這樣子即降低了服務端的請求耗時,同時也能降低資料量大小從而減少傳輸和解析耗時(當然多了一次對比過程耗時,基本可以忽律不計)

整體的方案概述為: 藉助客戶端對上次頁面資料的複用能力,通過針對購物車非同步操作進行增量更新,降低服務端請求的計算範圍和資料包體積,並最終達到降低網路耗時的目的 。第一期我們主要針 對"商品店鋪的選擇反選、商品數量的增減"操作進行定向優化,將計算範圍縮小到"已選中商品的店鋪元素、操作的商品店鋪元素、特殊固定元素"

資料取自中國深圳, 線上環境

  • 藉助AB實驗對比:ServerRt優化57.52%,SKU查詢量優化80.69,QPM優化217.75%

  • 客戶端大盤資料TotalTime從1100ms->750ms提升31.82%,通過細分維度可以觀察到Item引發的重新整理動作有明顯降低其他的基本穩定,符合預期;

購物車弱化重新整理頻次

Android購物車目前每次重新進入都會引發重新整理操作,結合購物車線上效能資料:使用者每次進入基本要等待1.029.81ms,64.5%的使用者可以在1s內完成載入,這就導致一個問題“ 部分加購的使用者可能重回購物車時也會引發重新整理 ”,譬如這個使用者故事:使用者在Cart Just For You模組看到了一個感興趣的商品並點選進入PDP, 在PDP瀏覽後(無任何加購操作)返回Cart,Cart重刷會導致之前正在瀏覽的資料被重新覆蓋。因此我們啟動了該專案主要目的是: 在兼顧購物車正常重新整理的前提下,降低購物車的重新整理頻次。

Android側僅開放“重回購物車時重新整理”,這是考慮到“大促場景下Android使用者群體龐大,加購動作如果直接繫結Cart重新整理行為可能引發流量壓力”;同時,Android側提供了“即時重新整理購物車”的能力以便於特殊場 景下的使用

資料取自中國深圳, 線上環境

  • 重回場景下降低了55.45%的重新整理請求,整體降低了35.28%的重新整理請求, 推全後單日預計減少千萬級冗餘請求

下單頁首屏預判

通過對年度同期資料的對比,我們發現相對於202004 Checkout Render介面耗時在860ms上下浮動,2021同期時間段已經上漲為1160ms上下增幅35%,鑑於Checkout日益增長的網路耗時,客戶端推動了Checkout首屏渲染快取專案,主要目的在於 通過複用上級頁面資料和本地快取資料快速渲染頁面首屏檢視,降低使用者在空白載入期間的等待焦灼感。

通過對線上資料的分析進入Checkout的路徑主要來自PDP.70+%和Cart.20+%,結合這兩種不同路徑,根據資料的 複用方式 我們將可複用資料分為2類:

  1. 上一跳頁面資料;譬如Cart選中的商品和店鋪、PDP對應的店鋪、商品和物流配送資訊;

  2. 固定出現但資料變化的元素;譬如店鋪物流配送(new)、包裹總價、支付方式、訂單流水、訂單總價等;

  3. 使用者不經常變動的歷史資料;譬如地址、優惠券輸入元件等。

根據資料的 儲存形式 我們可以分為4類:上一跳帶入、檔案快取非加密、檔案快取加密(譬如地址資訊)、自行構建的元素(店鋪物流)。基於這樣子推論,我們可 以根據可複用資料將頁面的大部分 區域進行預測式的提前展示,並在網路資料回撥後及時更新頁面檢視。

  • 通過進行AB實驗驗證後, 只打開購物車到下單頁的優化路徑,優化了大約125ms左右;只打開PDP到下單頁單的優化路徑,優化了大約390ms左右;全開桶提升528ms。

下單頁合併請求

測試團隊反饋通過不同路徑進入Checkout的場景中(同樣是單商品場景),使用者體感耗時會有一定的差別,經過詳細比對相差將近400ms,因此將此問題反饋給端側團隊進行排查。從端側梳理的結果來看,目前兩種路徑的 主要區別在於Cart_Submit請求的時間 ,Cart的跳轉是在收到服務端介面回撥後才觸發的. 對比mtop.lazada.carts.ultron.submit的totalTime時長400ms,正好是兩種路徑時長的差值。

通過進一步分析,Cart- ->Checko ut路徑中,客戶端只是將服務端返回的buyParams引數透傳給給了mtop.lazada.buy.renderorder介面,沒有做任何加工處理。但是由於端側兩次請 求的同步性,就導致了使用者體驗上的差異。東南亞的網路特性,我們從上圖中也就看到mtop.lazada.carts.ultron.submit的ServerRT只需要不到100ms,但是來回傳輸耗時缺需要200-300ms,如果只看serverrt可能覺得兩個同步請求差不了太多,但是考慮到網路傳輸耗時那麼對使用者體感的差異就會很大。

於後置合併,我們協同服務端提供一個 基於 mtop.lazada.carts.ultron.submit 和 mtop.lazada.buy.renderorder 的合併請求介面, 在不修改原介面內部邏輯的基礎上 ,服務端封裝一個上層介面開放給端側使用。請求的發起節點調整到進入下單頁面,也就是點選下單按鈕後直接進入下單頁面&將Cart選中資料透傳過去,並在下單頁面進行請求;調整後,Cart.Submit承載的失敗場景將直接掛在Checkout頁面。

  • 藉助AB實驗分析經過優化後,路由響應耗時(從使用者點選開始計時到下單頁發起頁面請求)434.48ms->64.33ms提升85.19%,網路總耗時(從使用者點選開始計時到下單頁收到請求返回資料)1308.66ms->965ms提升26.26%;

收銀臺前置請求&提前渲染

二次收銀臺native之後,雖然在效能上相對weex有比較大的提升但還稍遜於競品,通過對現有載入流程分析後,我們發現當前上游進入收銀臺的流程屬於序列,分段耗時如下:

優化的核心思想:後事前移,序列改並行。mtop本身不依賴Activity,可以直接放到路由層去開始請求,同時我們渲染的流程實際上是包含了載入佈局的時間(inflate)加繪製流程時間(即measure+layout+draw),通過本地自測可以看到收銀臺支付列表的一個佈局,inflate一般會耗時20ms左右而一般需要5個這樣的佈局才能基本覆蓋80%的頁面大概耗時100ms(低端機可能會更多),那麼這個渲染流程實際上也是可以提前載入的。

  • 藉助AB實驗分析,優化帶來了100ms的效能提升(701.62ms->604.74ms)提高14.29%

總結和展望

  • 藉助AB實驗平臺評估, 推全後全開優化組相對原始組PR預計帶來71,203DAB, 7051DNB;

  • 對於應用啟動耗時 :同比去年D11 Android啟動整體耗時提升23%,iOS啟動整體耗時提升20%;

  • 對於頁面渲染耗時指標 :同比去年D11Android全鏈路耗時提升37%,iOS全鏈路耗時提升優化34%;

  • 對於頁面二刷場景耗時指標 :購物車資料TotalTime提升31.82%,全量後ServerRt預計優化57.52%;

  • 對於降低冗餘請求指標 :購物車重回場景下降低了55.45%的重新整理請求,整體降低了35.28%的重新整理請求, 推全後單日預計減少千萬級冗餘請求。

體驗優化專案將會是伴隨著業務成長的一項持續動作,Lazada也將持續關注細節場景,不斷的發現問題、定位問題、解決問題並總結經驗。 本週三,我們將會繼續分享深度解析文章《Lazada 容器深度優化之旅》,敬請期待。

最後感謝參與專案一起奮鬥的所有小夥伴~

我們招聘啦!

Lazada創立於2012年,在東南亞印度尼西亞、馬來西亞、菲律賓、新加坡、泰國和越南 六國擁有超過8000萬活躍消費者,且擁有該地區競爭力優勢明顯的物流和支付網路 作為阿里巴巴東南亞旗艦電商平臺,在利用阿里巴巴先進成熟的產品技術快速提升海外本地電商能力並幫助阿里生態迅速發展海外業務的同時,我們基於阿里已有平臺抽取出一套國際化的全鏈路系統,從無線手機端到交易鏈路,從商家業務到大資料和推薦,打造全新的端到端國際電商作業系統。

在這裡你不僅有機會了解商品、交易、會員、營銷等核心平臺,而且有機會接受極具前瞻性的海外電商業務的挑戰,並且需要針對多國場景進行業務抽象和平臺剝離,任務的新穎性和挑戰性都是前所未有的。我們在招的崗位包含產品、架構師、開發、測試、前端等多種機會,業務涉及電商端到端的所有環節,只要你自信,有能力、有激情,一定可以找到吸引自己的新挑戰。 加入Lazada,和我們一起激盪東南亞市場,共創國際化電商!

簡歷投至方式

關注我們,每週 3 篇移動技術實踐&乾貨給你思考!