淘寶 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億＋的消費者，處理每日千億級的海量用户請求。作為阿里最重要的客户端團隊，我們負責淘寶移動域研發運維支撐、原生技術挖掘、核心技術建設，包括不限於客户端體驗、框架及創新體驗、廠商與系統技術、用户增長及移動平台。無論是基礎設施、業務創新還是技術發展，我們團隊都能為你提供巨大的機遇和成長空間，期待您加入。

✿    拓展閲讀

作者 | 古蹟

編輯| 橙子君

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

「」