淘寶 Android 端圖片體驗優化實踐

語言: CN / TW / HK
時間 2022-01-24 16:29:37
主題:

Android 端影象載入、顯示、處理、監控集一體的一站式解決方案。

背景

Phenix 影象載入體系是立足手淘面向阿里巴巴全集團打造的一款 Android 端集影象載入、顯示、處理、監控於一體的一站式解決方案。基於高可用、高效能、可高度定製、資料服務、省流量五大核心優勢而被集團各個業務接入使用，經過長期的迭代與維護進入了相對成熟和穩定的模式。

在如今更加追求體驗的背景下，對圖片庫提出的要求也越來越高。而圖片載入長尾問題，特別是在中低端機和弱網條件下體現的更加明顯。因此我們以手淘為出發點，基於使用者輿情反饋以及圖片庫自身埋點資料，對影響圖片正常展示的長尾問題進行了較為完整的梳理。

據統計，淘寶 Android 端每月圖片類輿情在幾百條，基本都表現出白屏、圖片載入失敗的現象。其中明確圖片載入慢的 case 下，基本有以下幾個因素：

  1. 使用者網路慢，圖片下載耗時久

  2. 磁碟快取讀取耗時，存在讀取阻塞未返回的情況

  3. 圖片尺寸大，原圖訪問 RT 耗時久

問題發現

結合輿情日誌，通過圖片庫埋點資料統計發現：

  1. 圖片載入磁碟讀取慢（超過 N 秒) 次數每日百萬次以上

  2. 圖片庫內部執行緒排程慢 (超過 N 秒)  次數每日千萬次以上

  3. 圖片網路錯誤類中，超時和連線錯誤每日次數億次以上

  4. 首頁資訊流圖片秒開率低，主要受制於原圖訪問問題

深入剖析場景根因

▐    磁碟讀取阻塞

磁碟快取讀取作為圖片載入流程中非常關鍵的一個環節，發生阻塞時後續聯網下載圖片資源、圖片解碼、圖片上屏等流程會被動等待，在使用者視角即為圖片未載入或頁面白屏。

▐    執行緒排程頻繁 

圖片庫將圖片的請求分割到多個階段  1. 記憶體快取查詢；2. 本地圖片處理；3. 磁碟快取查詢；4. 網路請求；5. 圖片解碼；6. 圖片回撥上屏。

每個階段都會進行執行緒切換，這些任務都共享一個大的執行緒池，頻繁的執行緒切換會增加效能損耗。

▐    網路任務佇列阻塞

圖片庫內部針對網路任務（包括網路連線和網路資料下載）制定了特殊的排程器，該排程器限制了在強弱網環境下允許被傳遞到執行緒池中的最大任務數。

而弱網條件下圖片資料返回慢，後續圖片請求任務被阻塞在網路排程器的內建佇列中，而不會進入執行緒池等待被執行，圖片載入流程會因為排隊而阻塞在佇列中，上屏時間被延後，影響使用者體驗。

▐    網路下載等待

圖片網路資料下載受限於網路速度，弱網條件下資料返回慢。在圖片庫共享執行緒池時，網路下載任務佔用著執行緒不釋放，會造成兩個比較明顯的問題：

  1. 當前圖片載入流程被阻塞

  2. 執行緒池中執行緒被佔用，後續圖片請求需要排隊等待

▐    圖片尺寸大&原圖訪問

選取 JPG/PNG/WEBP/HEIC 幾種圖片在最近一個月的整體載入時長，從圖中我們可以看出與其他圖片格式相比，HEIC格式圖片的整體耗時是最短的。這對於使用者體驗，特別是在中低端機上的體驗是有明顯的差距的。

非 HEIC 圖片在 CDN 命中率低，絕大多數情況下會訪問原圖。同時圖片尺寸大，再加上圖片庫內部的排程策略受網路資源下載時長的影響，會加劇單張圖片載入總耗時。

此外，Android 12 引入了對使用 AV1 圖片檔案格式 (AVIF) 圖片的支援，這種格式可以顯著提升相同檔案大小下的圖片質量，而圖片庫目前還不支援。

分場景優化

基於以上提出的幾類比較明顯的限制根因，我們為圖片上屏的場景分別制定了優化方案，並通過解決圖片載入長尾問題來提升使用者體驗。

▐    統一儲存空窗優化

針對磁碟快取讀取阻塞問題，圖片庫增加儲存讀取異常檢測與異常狀態恢復檢測方案。

  1. 磁碟讀取耗時檢測：

    預設定磁碟讀取阻塞的條件（可以通過雲端配置平臺動態調整）

    在連續多次檢測到磁碟快取讀取任務被阻塞時主動跳過二級快取，後續圖片請求全部走網路請求

  2. 磁碟快取讀取跳過狀態恢復檢測：

    預設定恢復二級快取讀取的條件（可以通過雲端配置平臺動態調整）

    在跳過磁碟讀取一段時間後，同時發起多個磁碟快取讀取任務，並且在規定時間內正常返回時恢復二級快取讀取，後續的圖片載入流程與初始策略一致

▐    執行緒排程方案改造

  • 優化點1: 減少執行緒切換

重新梳理各任務之間的關聯情況以及各任務在執行時的耗時瓶頸點，最大可能的降低執行緒切換的頻率。

  1. 僅保留兩次執行緒排程

    主執行緒切換至工作執行緒

    網路庫執行緒切換至圖片庫執行緒

  • 優化點2: 去掉網路排程內部阻塞

網路排程器的存在主要是為了限制在強弱網環境下允許被傳遞到執行緒池中的最大任務數，避免出現網路任務佔滿執行緒池，而後續可以從快取中獲取的圖片也無法上屏顯示的情況。

基於  優化點3  中網路資料下載變更為分片回撥，不再佔用圖片庫執行緒。此時圖片庫內部的網路排程器就不再被使用，該問題也會被規避。

  • 優化點3：網路資料分塊接收

以一種空間換時間的方式，解決弱網條件下網路資料返回慢所導致的執行緒佔用問題。

  1. 網路庫首次回撥建立指定大小的容器，之後分段接受圖片資料，直到所有資料全部返回後切換到圖片庫執行緒執行後續任務

  2. 弱網條件下返回資料慢也不影響圖片庫中執行緒的使用，通過提高執行緒使用率，降低等待時間來縮短圖片載入時長

▐    尺寸更小的圖片格式

Android 12 引入了對使用 AV1 圖片檔案格式 (AVIF) 圖片的支援。AVIF 是一種使用 AV1 編碼的圖片和圖片序列的容器格式。利用了影片壓縮的幀內編碼內容。與以前的圖片格式（例如 JPEG）相比，這種格式可顯著提升相同檔案大小下的圖片質量。

採用新一代 AV1 圖片格式，圖片的壓縮率相比 HEIC 能提高約 25%，能夠在降低圖片尺寸的同時縮短圖片下載時長，提升使用者體驗。

通過與圖片空間合作，在圖片庫內部增加了 AVIF 圖片格式的支援和適配。目前已經歷了 3 次完整的獨立灰度，後期會先在手淘中落地並逐漸放量。

總結

磁碟快取阻塞問題逐步放量至全量上線後優化效果明顯，每週輿情數相比優化初期降低超過50%，磁碟讀取耗時超過 N 秒樣本數降低90%；

執行緒排程優化方案已經獨立灰度完成，從灰度資料看執行緒排程慢 (超過 N 秒) 佔比小於 0.01%；預計上線後與優化前相比每日能減少 90% 的樣本數；

AVIF 圖片格式獨立灰度後圖片尺寸與HEIC相比優化 15%，解碼耗時基本保持一致，由於目前CDN 命中率較低，RT 耗時較長，需要等放量以後整體優化效果才能體現。同時後續壓縮率與HEIC 相比預期達到 25%，會根據實際的埋點資料來決定後期的放量節奏。

我們還能做什麼？

▐    圖片格式收斂至HEIC（後續可統一升級到AVIF）

目前 Native 頁面中 HEIC 圖片佔比約 60%，而 H5 頁面中只有部分資源適配了 HEIC。

  1. 在 Native 頁面，使用圖片庫提供的元件或者呼叫圖片庫提供的 CDN 適配策略時，圖片庫會對傳入的 URL 做處理，按照圖片空間的規則拼接上 HEIC 字尾，這樣當 URL 到達 CDN 時，如果有HEIC 圖片快取直接返回，如果沒有會請求圖片空間的服務將原始圖片轉碼成 HEIC 圖片

  2. H5 頁面中由於  UC 核心提供了外接三方解碼器的能力，同時手淘支援遠端 SO 的下載， 在這兩個前提下 H5 頁面的圖片使用圖片庫提供的 CDN 策略，以及圖片庫提供的外接解碼器來載入 HEIC 圖片

針對 Native 頁面可以推動業務方使用圖片庫提供的元件，或者主動呼叫圖片庫提供的 CDN 策略來接入對 HEIC 圖片的支援。

針對 H5 頁面正在和業務方做溝通以及制定更加完善的替換方案，爭取早日完成圖片格式的收斂。

寫在最後

對於圖片上屏體驗而言，Phenix 圖片庫任重而道遠。在一輪又一輪的技術迭代下，手淘的圖片上屏體驗在不斷的優化和提升。希望在未來，圖片庫在優化自身的同時能夠結合網路庫、圖片空間等模組進一步挖掘隱藏在各個環節的效能瓶頸，幫助提升使用者體驗。

團隊介紹

我們是大淘寶平臺技術的「終端平臺技術部」。我們擁有世界最大的電商場景和一流的移動技術平臺，打造著領先行業的技術產品，服務遍佈全世界10億＋的消費者，處理每日千億級的海量使用者請求。作為阿里最重要的客戶端團隊，我們負責淘寶移動域研發運維支撐、原生技術挖掘、核心技術建設，包括不限於客戶端體驗、框架及創新體驗、廠商與系統技術、使用者增長及移動平臺。無論是基礎設施、業務創新還是技術發展，我們團隊都能為你提供巨大的機遇和成長空間，期待您加入。

✿    拓展閱讀

作者 | 古蹟

編輯| 橙子君

出品| 阿里巴巴新零售淘系技術

「」