背景 

汽車之家App作為汽車之家鏈接全球5億用戶的重要承載工具，是汽車之家的核心業務之一。在激烈的市場競爭中，為廣大用戶提供優質的產品和服務是我們的核心競爭力。面對日益增長的用戶需求和技術挑戰, 滿足用戶對卓越體驗的追求, 客戶端研發部制定了:"鑄精品，釋產能，啟未來"的基本方向。"鑄精品"強調提升產品質量和用戶體驗, "釋產能"代表著充分利用現有資源和能力，提高研發和交付的效率, "啟未來"目標是積極關注行業趨勢和創新技術,不斷探索前沿領域，積極引入新技術和解決方案。本次分享的主題是我們在"鑄精品"方向的努力，并對我們的優化工作進行詳細總結。同時，我們也展望了未來的發展方向，繼續致力于提升客戶端的性能和用戶體驗。

1.專項性能優化總結

1.1 App客戶端性能優化總結

在當今數字化時代，App已成為人們生活和工作中不可或缺的一部分。客戶端性能優化成為App開發的重要任務之一。為了提升用戶體驗，需要持續關注并改善各項性能指標，如啟動速度、頁面響應速度、流暢度等。針對這些指標，我們制定了全方位的提升方向，包括工具與平臺建設、專項指標體驗優化、流程規范等。致力于提升App的穩定性、流暢度和響應速度，為用戶帶來更好的使用體驗。

? 工具與平臺建設

為了更好地監控和優化客戶端性能，需要建設完善App性能檢測工具及技術運營平臺，具體措施如下：

數據采集：完善四大采集SDK，啟動耗時SDK、秒開SDK、卡頓SDK、閃退SDK，以收集全面準確的性能數據。

數據處理：我們將對采集SDK上報的數據進行統一處理，包括日志接收、日志解析、數據計算和存儲等，以提高數據的可讀性和有效性。

數據查看：提供詳細的現場日志和多維度的數據查看，以便更好地了解性能問題。用戶可以方便地查看各種性能指標，如CPU、內存、網絡、異常位置等。

問題分析：自動化的幫助用戶快速定位問題原因。用戶也可以使用多種分析工具協助定位問題。

趨勢分析：全局統籌查看數據指標，分析指標趨勢和業務趨勢，以便更好地制定優化策略。

異常報警：提供各種維度的自動化, 智能的異常報警功能，及時發現和解決問題。用戶可以設置自己的報警條件，出現異常時及時接收到報警信息，以便迅速解決問題。

圖片

? 專項指標體驗優化

持續優化平臺架構，制定系統化的優化改進方案，以達到汽車之家App閃退率<=0.08%,App頁面秒開率>=98%，App啟動2s達標率>=98%，H5 1.5s打開率>=70%,主件卡頓率<=1%,嚴重卡頓率<=0.01%的目標。具體措施如下：

閃退問題：深入系統源碼解決系統閃退問題，制定系統性內存優化方案，解決內存OOM崩潰，Native底層崩潰攻克, 并且專項解決各個部門的疑難問題。

秒開提升：完善網絡層技術升級、升級頁面渲染引擎、優化業務側邏輯集合，進行分布式加載、使用預加載與緩存等策略, 提升用戶瀏覽順暢度體驗。

卡頓優化：通過減少主線程耗時、優化頁面層級等手段，算法優化等手段提升主App流暢度。

啟動加速：優化啟動耗時，通過延遲初始化,異步加載,懶加載,業務梳理等方式提升打開App的速度。

圖片

? 流程規范

制定完善的內部溝通協作上線流程規范，通過落實流程規范和措施，全面提升App的上線質量和效率。

上線流程規范：制定明確的上線流程規范，包括需求評審、設計評審、開發評審、測試評審和上線評審等環節，以確保每個環節都經過充分的確認和驗收，降低上線風險。

內部溝通協作：建立跨部門的協作機制，明確各部門的職責和溝通渠道，加強溝通和協作，以便及時解決問題，提高上線效率和質量。

自動化檢測：利用App性能檢測平臺的自動化檢測功能，對App的各項性能指標進行監控和評估，及時發現和解決潛在的問題，確保App上線前的質量達標。

質量評估：建立完善的質量評估機制，對每個版本的上線進行全面評估，包括性能指標、功能完整性、穩定性和安全性等方面，以確保上線版本的質量符合要求。

問題反饋和解決：建立完善的問題反饋和解決機制，及時處理用戶反饋的問題，對于上線后發現的問題，要及時跟進和解決，并反饋給相應的部門，討論問題的根本原因，制定系統性解決方案，以避免類似問題再次出現。

圖片

? 優化效果展示

• 三大App 6 項整體指標, 均達標

（1）App閃退率降低79.71%

（2）H5 1.5秒打開率提升75.71%

（3）App卡頓率降低73.68%

（4）App嚴重卡頓率降低98.16%

圖片

• UEC用戶反饋質量問題數量上看，專項性能優化以后，整體質量問題反饋減少 90%

圖片

1.2H5端性能優化總結

 針對前端 H5 頁面大多為 CSR 應用的現狀，H5 秒開率優化措施的核心目標為兩個：

1. 第一時間出現內容（白屏的等待會讓用戶焦慮），我們在適當的時機和位置添置了骨架屏；

2.  提前業務內容出現的時間點（骨架屏只能稍微緩解用戶的心情）；

為了實現以上兩個目標，我們選定了包括「基礎設施」「App 融合」「渲染策略」及「高級精細化」四個方向，并施以多項技術優化手段：

? 基礎設施優化

完善「前端加速服務」，使其承載的 HTML 與靜態資源能盡享 Nginx 級別的優化，其中包括：

（1）原站與 CDN 自行吐出用戶瀏覽器能接受的最佳圖片格式 WebP，無需開（2）發者關注

（3）支持刷新 CDN 緩存、資源 CDN 預熱

（4）支持基礎 JS 圖片裁切，在保證顯示效果的情況下有效降低圖片大小

（5）開發者可以自行精細化控制各類資源的緩存時間，同時為開發者提供「開發模式」實現靜態資源無緩存

（6）CDN 命中規則升級，忽略不需要的 URL 參數，提升 CDN 緩存命中率資源緩存時間 >= 3600 秒

? App 融合優化

（1）與客戶端團隊合作，實現前端重點 JS Lib 預加載：在 App WebView 中針對 React、Vue、Zepto 三大常用框架相關資源及 Polyfill 進行了預加載處理，在項目中引用特定的資源地址來以達到無阻塞的資源加載

（2）原生「Loading 恐龍」Banner 調用時機調優

（3）更大范圍的推廣 App 橋接協議 JS 庫 ahApp 3.0提升交互性能

? 渲染策略優化

為了保證用戶體驗，徹底避免白屏的出現，我們出具了通用骨架屏方案(參考),  在頁面加載過程中立即顯示出骨架屏，給用戶一種頁面正在加載的感覺，減少了頁面加載的等待時間，提升了用戶體驗, 同時要求：骨架圖渲染前不要出現任何網絡請求，在此之前 HTML 內容不要超過 4KB

? 高級精細化優化

以上幾個方面都屬于可以簡易實施的策略，不需要占用太多的開發時間即可看到成效。

為了追求效果最大化，我們也鉆研出一套精細化的量化標準，用于指導具體的優化操作。只要達成如下指標，「H5 秒開率」的效果會更進一步，但需要具體的開發同學逐項微調代碼，屬于進階操作，詳情如下：

• CSS/JS 資源進行合并，目前H5域名都支持（減少一次請求，減少建立請求的時間）
• 首屏以外圖片增加 懶加載（優先把網絡資源讓給首屏）
• 控制 HTML 頁面大小 <= 32KB
• 首屏總請求數 <= 50 個（LCP 觸發前）
• 普通圖片資源 <= 30KB，大圖資源 <= 100KB
• 首屏消耗流量 <= 500KB（含 HTML / CSS / JS / IMG / etc..）

手動 JPEG/PNG 壓縮,例如:https://tinypng.com/

手動 GIF 壓縮,例如:https://docsmall.com/gif-compress

? 優化效果展示

App 整體 H5 秒開率由 10 月的 60% 提升到了 12 月的 89%+ 且持續保持在高位，如下圖:

圖片

2.后續質量提升展望

[專項性能優化]的關鍵指標的治理中，我們取得了一些成績，這是多個部門和眾多員工共同努力的成果。

汽車之家客戶端研發部將持續關注用戶需求，加強技術創新，推動技術變革，全力打造卓越的產品體驗，以滿足用戶對高質量產品的需求為目標。同時，我們將持續優化工作流程，提高開發效率，探索新的開發模式，積極應用新技術，為用戶帶來更多驚喜和便捷。我們將始終堅持“用戶至上、技術驅動”的理念，不斷努力實現公司的戰略目標。后續「好UV治理專項」、「打造質量閉環」、「H5性能優化」三個方向繼續努力 

2.1好UV治理專項

 目標是制定核心頁面的體驗標準，推進相關指標的提升，從而最終提高用戶在核心頁面上的使用體驗。項目目標上拆分為: App整體好UV率達標、業務上核心頁面好UV率達標、優化專項: 播放器、圖片和接口的性能數據提升。

? 指標定義

（1）核心頁面：主App中各業務線TOP5頁面，或者UV>10W的頁面，或者其他關鍵頁面（如留資、3D車展）

（2）App端好UV：App端的好UV，反映一個用戶的流暢且穩定的使用體驗。一天之內，用戶如果沒有發生閃退、卡頓、慢開、錯誤四種情況，那么這個用戶就是一個好UV用戶。

（3）從技術維度劃分四類問題：

常規問題（閃退、嚴重卡頓、頁面慢開）

接口問題（接口慢開、接口錯誤）

圖片問題（圖片慢開、圖片錯誤）

播放問題（起播慢、播放錯誤、播放卡頓）

（4）核心頁面好UV率：一天之內，一個核心頁面上，好UV用戶數/頁面UV總數。

? 指標計算方式

核心頁面好UV率計算公式：

核心頁面好UV率 = 1 - 核心頁面壞UV /  核心頁面UV

核心頁面壞UV = distinct  (常規問題UV | 接口問題UV | 圖片問題UV | 播放問題UV)

? 指標考核維度

客戶端的性能與用戶設備的硬件環境息息相關, 很多情況下性能的不達標都是受到硬件因素影響(用戶網絡被限速, CPU被降頻, 內存不足等等), 為了能更好的提升用戶體驗, 更多突破自身問題導致的性能瓶頸, 我們將優先提升優質用戶的性能體驗, 更好的提升大多數用戶體驗

好UV率考核分為優質用戶、全部用戶兩個維度。優質用戶定義：好網絡! 好設備! 的用戶。（好網絡: 指一個用戶一天之內沒有遇到弱網的情況; 好設備: 指高端設備）

圖片

? 播放器、圖片和接口好UV專項

為了進一步提升用戶的使用體驗，特別是視頻播放體驗、圖片加載速度和頁面響應速度，我們成立了播放器、圖片和接口專項，旨在對重要功能深入研究, 針對性的優化性能，提升用戶體驗。

? 播放器性能提升

建立數據查詢平臺，監測和評估首幀耗時、卡頓和播放錯誤等指標，以數據為依據評估優化效果。在播放端針對不同場景進行優化，包括視頻預加載、播放器預加載、DNS預解析、提前下發媒體信息、使用直播LAS協議等。同時對播放器的使用邏輯進行優化，并合理根據場景調整清晰度，同時進行轉碼調優，以提升用戶的播放體驗。

? 圖片性能提升

圖片請求策略調優、加載圖片支持自動剪裁、采用適當的壓縮算法和格式以減小圖片文件大小，并優化了圖片網絡請求協議, CDN廠商深度對接, 針對常見的錯誤定制報警流程, 自動化的解決問題。

? 接口性能提升

針對汽車之家業務域名較多, 導致的鏈接復用率低和DNS解析錯誤多的問題, 制定統一的域名收斂方案，減少網絡請求時的域名解析時間和連接建立時間。其次，針對鏈接錯誤率占比高的問題，研發移動/Wi-Fi多通道、復合鏈接和H3協議等策略，減少接口錯誤率提升接口的速度，以保障用戶在使用過程中的順暢體驗。

2.2打造質量閉環

 ? 研發期

研發期建立研發質量評估系統, 并且完善自動化性能檢測。具體措施主要包括代碼檢測、性能驗收平臺。

圖片

? 上線前

為了確保產品上線后的質量和穩定性。我們將打通代碼發布系統和各類業務配置平臺對接到性能驗收平臺，實現上線前無死角性能檢測，確保產品能夠穩定運行。其次，我們將進行平臺性能指標優化，更精準的發現問題, 以提升用戶使用體驗。

圖片

? 上線后

• 打造線上問題分析助手，快速分析、定位、解決問題

建立一個智能化的線上問題分析助手，使用自動化技術快速獲取并分析應用程序的運行日志，自動進行異常檢測和問題診斷，然后將結果反饋給開發人員，以便快速解決問題并優化應用程序的性能。

圖片

• 建立業務價值評估矩陣和上下線流程，解決沒人管、質量差，下不掉的問題

建立一個全面的業務價值評估矩陣和上下線流程，通過業務價值評估、技術價值評估、資源使用評估和功能價值評估四大指標來持續監管業務。評估出低價值的業務，制定下線依據，以此減少包提交的增長，優化應用程序的功能和質量。

圖片

2.3H5性能優化

 ? 完善前端加速服務

• 常用開發工具方法打包到容器鏡像，加速前端性能優化配置
• S3 圖片自動 WebP 直接接入 DIS，以更短的鏈路及更快的速速提升圖片質量

? 圖片質量提升

圖片

? 圖片質量提升工具

開發工具：檢測圖片尺寸是否過大、流量損耗過多

靜態資源服務支持自動 WebP、支持 DIS 裁切

CDN 資源預熱，在汽車之家公共 “前端加速服務” 中支持

? 制定前端項目標準規范

過去各 BU 團隊前端項目差異化較為嚴重，擁有各自的標準，其中一些項目基礎情況較薄弱，在項目優化及業務交接后新人接入方面存在不少困難。為此我們嘗試組織各團隊將其前端公共項目、模板項目、公共服務進行統一：

? 公共項目 Git 倉庫統一

各團隊前端人員都參與進來并共同討論，以便形成有意義的解決方案。根據具體情況調整規范，保證規范符合組織架構和技術要求，將規范化視作一個持續性的過程。收集有價值的反饋，不斷更新，將知識融入到原有的規范中，以便隨時保持規范的有效性和完整性。

? 應用模板化

前端應用創建與發版流程「由繁化簡」，提供標準化前端模板，一鍵創建運行環境及發布流水線，簡化復雜的各階段配置及學習成本；提供優化后的容器鏡像，更小的鏡像體積，并且在環境中集成通用調試工具方法，降低新項目發版操作耗時。提升前端研發效能與開發體驗，讓技術人員更多專注于業務本身。

? 用戶體驗再提升

去年我們為提升首屏展現速度做了一系列優化，雖然已經達到了一定的成果，除此之外首屏外的體驗仍很重要。今年我們計劃通過在渲染端與 Server 兩測，采用搭建監控工具，關鍵環節埋點等手段，針對 H5 “流暢度”、“穩定性” 兩方面進一步優化，突破用戶體驗：

? 流暢度

圖片慢：圖片請求時長超過 2 秒

接口慢：對用戶有影響的接口耗時超過 1 秒

? 搭建穩定性監控

H5 頁面錯誤：影響業務邏輯的異常比如：404、500

圖片錯誤：重試之后仍然失敗的情況，出現三次失敗以上算作一次壞體驗

接口錯誤：自動重試之后仍然失敗的情況

圖片

3.總結 

以上是我們汽車之家客戶端研發部團隊在[專項性能優化總結]與[后續質量提升展望]方面的工作總結。總的來說，"鑄精品"的核心價值在于通過精心設計、優化性能和持續改進，提升汽車之家App的流暢性、穩定性和功能豐富性。此外，我們還通過系統化的質量優化和搭建平臺與工具，實現以下核心價值：

1. App的性能可量化：準確度量和洞察真實用戶體驗及異常事件，數字化展現關鍵體驗指標。通過數據分析和評估，深入了解用戶的實際體驗，并針對性能問題進行改進和優化。

2. 提效：我們提供完整的全鏈路日志和問題發生快照信息，支持多維度的監控報警。能夠第一時間發現問題，進行分析和定位，并快速解決，提高研發效率和交付速度。

3. 作為用戶體驗改善的抓手，具備可復制性。通過在客戶端研發部的實踐和經驗積累，我們能夠將優化方案和工具應用于全公司的其他產品和業務，從而改善用戶體驗和提升整體產品質量。

由于業務、技術受限，可能視角還是不夠全面，希望觀眾讀到本文可以一起參與進來討論、共同研究，如果您對我們的工作有任何疑問或建議，我們非常樂意傾聽并接受您的指教。謝謝大家!

作者簡介

李雙志

■ 客戶端研發部-客戶端架構團隊

■ 專注于Android移動端技術, 負責汽車之家基礎架構設計, 穩定性建設、用戶體驗提升、跨平臺框架、網絡優化等, 具有豐富的移動端開發經驗