背景

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

專項性能優(yōu)化總結(jié)

App客戶端性能優(yōu)化總結(jié)

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

一、工具與平臺建設

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

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

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

數(shù)據(jù)查看：提供詳細的現(xiàn)場日志和多維度的數(shù)據(jù)查看，以便更好地了解性能問題。用戶可以方便地查看各種性能指標，如CPU、內(nèi)存、網(wǎng)絡、異常位置等。

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

趨勢分析：全局統(tǒng)籌查看數(shù)據(jù)指標，分析指標趨勢和業(yè)務趨勢，以便更好地制定優(yōu)化策略。

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

二、專項指標體驗優(yōu)化

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

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

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

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

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

三、流程規(guī)范

制定完善的內(nèi)部溝通協(xié)作上線流程規(guī)范，通過落實流程規(guī)范和措施，全面提升App的上線質(zhì)量和效率

上線流程規(guī)范：制定明確的上線流程規(guī)范，包括需求評審、設計評審、開發(fā)評審、測試評審和上線評審等環(huán)節(jié)，以確保每個環(huán)節(jié)都經(jīng)過充分的確認和驗收，降低上線風險。

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

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

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

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

優(yōu)化效果展示

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

• App閃退率降低79.71%
• H5 1.5秒打開率提升75.71%
• App卡頓率降低73.68%
• App嚴重卡頓率降低98.16%

2、UEC用戶反饋質(zhì)量問題數(shù)量上看，專項性能優(yōu)化以后，整體質(zhì)量問題反饋減少 90%

H5端性能優(yōu)化總結(jié)

針對前端 H5 頁面大多為 CSR 應用的現(xiàn)狀，H5 秒開率優(yōu)化措施的核心目標為兩個：

• 第一時間出現(xiàn)內(nèi)容（白屏的等待會讓用戶焦慮），我們在適當?shù)臅r機和位置添置了骨架屏。
• 提前業(yè)務內(nèi)容出現(xiàn)的時間點（骨架屏只能稍微緩解用戶的心情）。

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

基礎設施優(yōu)化

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

• 原站與 CDN 自行吐出用戶瀏覽器能接受的最佳圖片格式 WebP，無需開發(fā)者關注。
• 支持刷新 CDN 緩存、資源 CDN 預熱。
• 支持基礎 JS 圖片裁切，在保證顯示效果的情況下有效降低圖片大小。
• 開發(fā)者可以自行精細化控制各類資源的緩存時間，同時為開發(fā)者提供「開發(fā)模式」實現(xiàn)靜態(tài)資源無緩存。
• CDN 命中規(guī)則升級，忽略不需要的 URL 參數(shù)，提升 CDN 緩存命中率。
• 資源緩存時間 >= 3600 秒。

App 融合優(yōu)化

• 與客戶端團隊合作，實現(xiàn)前端重點 JS Lib 預加載：在 App WebView 中針對 React、Vue、Zepto 三大常用框架相關資源及 Polyfill 進行了預加載處理，在項目中引用特定的資源地址來以達到無阻塞的資源加載。
• 原生「Loading 恐龍」Banner 調(diào)用時機調(diào)優(yōu)。
• 更大范圍的推廣 App 橋接協(xié)議 JS 庫 ahApp 3.0提升交互性能。

渲染策略優(yōu)化

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

高級精細化優(yōu)化

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

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

• CSS/JS 資源進行合并，目前H5域名都支持（減少一次請求，減少建立請求的時間）。
• 首屏以外圖片增加 懶加載（優(yōu)先把網(wǎng)絡資源讓給首屏）。
• 控制 HTML 頁面大小 <= 32KB。
• 首屏總請求數(shù) <= 50 個（LCP 觸發(fā)前）。
• 普通圖片資源 <= 30KB，大圖資源 <= 100KB。
• 首屏消耗流量 <= 500KB（含 HTML / CSS / JS / IMG / etc..）。
• 手動 JPEG/PNG 壓縮,例如:https://tinypng.com/。
• 手動 GIF 壓縮,例如:https://docsmall.com/gif-compress。

優(yōu)化效果展示：

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

后續(xù)質(zhì)量提升展望

[專項性能優(yōu)化]的關鍵指標的治理中，我們?nèi)〉昧艘恍┏煽?，這是多個部門和眾多員工共同努力的成果。

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

一、好UV治理專項

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

指標定義

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

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

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

• 常規(guī)問題（閃退、嚴重卡頓、頁面慢開）
• 接口問題（接口慢開、接口錯誤）
• 圖片問題（圖片慢開、圖片錯誤）
• 播放問題（起播慢、播放錯誤、播放卡頓）

核心頁面好UV率：一天之內(nèi)，一個核心頁面上，好UV用戶數(shù)/頁面UV總數(shù)。

指標計算方式

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

• 核心頁面好UV率 = 1 - 核心頁面壞UV /  核心頁面UV。
• 核心頁面壞UV = distinct  (常規(guī)問題UV | 接口問題UV | 圖片問題UV | 播放問題UV)。

指標考核維度

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

好UV率考核分為優(yōu)質(zhì)用戶、全部用戶兩個維度。優(yōu)質(zhì)用戶定義：好網(wǎng)絡! 好設備! 的用戶。（好網(wǎng)絡: 指一個用戶一天之內(nèi)沒有遇到弱網(wǎng)的情況; 好設備: 指高端設備）。

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

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

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

圖片性能提升：圖片請求策略調(diào)優(yōu)、加載圖片支持自動剪裁、采用適當?shù)膲嚎s算法和格式以減小圖片文件大小，并優(yōu)化了圖片網(wǎng)絡請求協(xié)議, CDN廠商深度對接, 針對常見的錯誤定制報警流程, 自動化的解決問題。

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

二、打造質(zhì)量閉環(huán)

1、研發(fā)期

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

2、上線前

為了確保產(chǎn)品上線后的質(zhì)量和穩(wěn)定性。我們將打通代碼發(fā)布系統(tǒng)和各類業(yè)務配置平臺對接到性能驗收平臺，實現(xiàn)上線前無死角性能檢測，確保產(chǎn)品能夠穩(wěn)定運行。其次，我們將進行平臺性能指標優(yōu)化，更精準的發(fā)現(xiàn)問題, 以提升用戶使用體驗。

3、上線后

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

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

建立業(yè)務價值評估矩陣和上下線流程，解決‘沒人管、質(zhì)量差，下不掉的問題：

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

三、H5性能優(yōu)化

完善前端加速服務

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

圖片質(zhì)量提升

圖片質(zhì)量提升工具

• 開發(fā)工具：檢測圖片尺寸是否過大、流量損耗過多
•  靜態(tài)資源服務支持自動 WebP、支持 DIS 裁切
• CDN 資源預熱，在汽車之家公共 “前端加速服務” 中支持

制定前端項目標準規(guī)范

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

公共項目 Git 倉庫統(tǒng)一：

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

應用模板化：

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

用戶體驗再提升：

去年我們?yōu)樘嵘灼琳宫F(xiàn)速度做了一系列優(yōu)化，雖然已經(jīng)達到了一定的成果，除此之外首屏外的體驗仍很重要。今年我們計劃通過在渲染端與 Server 兩測，采用搭建監(jiān)控工具，關鍵環(huán)節(jié)埋點等手段，針對 H5 “流暢度”、“穩(wěn)定性” 兩方面進一步優(yōu)化，突破用戶體驗：

流暢度

• 圖片慢：圖片請求時長超過 2 秒。
• 接口慢：對用戶有影響的接口耗時超過 1 秒。

搭建穩(wěn)定性監(jiān)控

• H5 頁面錯誤：影響業(yè)務邏輯的異常比如：404、500。
• 圖片錯誤：重試之后仍然失敗的情況，出現(xiàn)三次失敗以上算作一次壞體驗。
• 接口錯誤：自動重試之后仍然失敗的情況。

總結(jié)

以上是我們汽車之家客戶端研發(fā)部團隊在[專項性能優(yōu)化總結(jié)]與[后續(xù)質(zhì)量提升展望]方面的工作總結(jié)?？偟膩碚f，"鑄精品"的核心價值在于通過精心設計、優(yōu)化性能和持續(xù)改進，提升汽車之家App的流暢性、穩(wěn)定性和功能豐富性。此外，我們還通過系統(tǒng)化的質(zhì)量優(yōu)化和搭建平臺與工具，實現(xiàn)以下核心價值：

• App的性能可量化：準確度量和洞察真實用戶體驗及異常事件，數(shù)字化展現(xiàn)關鍵體驗指標。通過數(shù)據(jù)分析和評估，深入了解用戶的實際體驗，并針對性能問題進行改進和優(yōu)化。
• 提效：我們提供完整的全鏈路日志和問題發(fā)生快照信息，支持多維度的監(jiān)控報警。能夠第一時間發(fā)現(xiàn)問題，進行分析和定位，并快速解決，提高研發(fā)效率和交付速度。
• 作為用戶體驗改善的抓手，具備可復制性。通過在客戶端研發(fā)部的實踐和經(jīng)驗積累，我們能夠?qū)?yōu)化方案和工具應用于全公司的其他產(chǎn)品和業(yè)務，從而改善用戶體驗和提升整體產(chǎn)品質(zhì)量。

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