Android 端圖像加載、顯示、處理、監控集一體的一站式解決方案。

背景

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

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

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

用戶網絡慢，圖片下載耗時久

磁盤緩存讀取耗時，存在讀取阻塞未返回的情況

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

問題發現

結合輿情日志，通過圖片庫埋點數據統計發現：

圖片加載磁盤讀取慢（超過?N?秒)?次數每日百萬次以上

圖片庫內部線程調度慢?(超過?N?秒)??次數每日千萬次以上

圖片網絡錯誤類中，超時和連接錯誤每日次數億次以上

首頁信息流圖片秒開率低，主要受制于原圖訪問問題

深入剖析場景根因

???磁盤讀取阻塞

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

???線程調度頻繁?

圖片庫將圖片的請求分割到多個階段? 1. 內存緩存查找；2. 本地圖片處理；3. 磁盤緩存查找；4. 網絡請求；5. 圖片解碼；6. 圖片回調上屏。

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

???網絡任務隊列阻塞

圖片庫內部針對網絡任務（包括網絡連接和網絡數據下載）制定了特殊的調度器，該調度器限制了在強弱網環境下允許被傳遞到線程池中的最大任務數。

而弱網條件下圖片數據返回慢，后續圖片請求任務被阻塞在網絡調度器的內置隊列中，而不會進入線程池等待被執行，圖片加載流程會因為排隊而阻塞在隊列中，上屏時間被延后，影響用戶體驗。

???網絡下載等待

圖片網絡數據下載受限于網絡速度，弱網條件下數據返回慢。在圖片庫共享線程池時，網絡下載任務占用著線程不釋放，會造成兩個比較明顯的問題：

當前圖片加載流程被阻塞

線程池中線程被占用，后續圖片請求需要排隊等待

???圖片尺寸大&原圖訪問

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

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

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

分場景優化

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

???統一存儲空窗優化

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

磁盤讀取耗時檢測：

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

在連續多次檢測到磁盤緩存讀取任務被阻塞時主動跳過二級緩存，后續圖片請求全部走網絡請求

磁盤緩存讀取跳過狀態恢復檢測：

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

在跳過磁盤讀取一段時間后，同時發起多個磁盤緩存讀取任務，并且在規定時間內正常返回時恢復二級緩存讀取，后續的圖片加載流程與初始策略一致

???線程調度方案改造

• 優化點1:?減少線程切換

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

僅保留兩次線程調度

主線程切換至工作線程

網絡庫線程切換至圖片庫線程

• 優化點2:?去掉網絡調度內部阻塞

網絡調度器的存在主要是為了限制在強弱網環境下允許被傳遞到線程池中的最大任務數，避免出現網絡任務占滿線程池，而后續可以從緩存中獲取的圖片也無法上屏顯示的情況。

基于?優化點3?中網絡數據下載變更為分片回調，不再占用圖片庫線程。此時圖片庫內部的網絡調度器就不再被使用，該問題也會被規避。

• 優化點3：網絡數據分塊接收

以一種空間換時間的方式，解決弱網條件下網絡數據返回慢所導致的線程占用問題。

網絡庫首次回調創建指定大小的容器，之后分段接受圖片數據，直到所有數據全部返回后切換到圖片庫線程執行后續任務

弱網條件下返回數據慢也不影響圖片庫中線程的使用，通過提高線程使用率，降低等待時間來縮短圖片加載時長

???尺寸更小的圖片格式

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。

在?Native?頁面，使用圖片庫提供的組件或者調用圖片庫提供的?CDN?適配策略時，圖片庫會對傳入的?URL?做處理，按照圖片空間的規則拼接上?HEIC?后綴，這樣當?URL?到達?CDN?時，如果有HEIC?圖片緩存直接返回，如果沒有會請求圖片空間的服務將原始圖片轉碼成?HEIC?圖片

H5?頁面中由于?UC?內核提供了外接三方解碼器的能力，同時手淘支持遠程?SO?的下載，在這兩個前提下?H5?頁面的圖片使用圖片庫提供的?CDN?策略，以及圖片庫提供的外置解碼器來加載?HEIC?圖片

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

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

寫在最后

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

團隊介紹

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

???拓展閱讀

作者|古跡

編輯|橙子君

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

總結

以上是生活随笔為你收集整理的淘宝 Android 端图片体验优化实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。