背景

?  前端性能優(yōu)化的業(yè)務(wù)意義

前端的本質(zhì)價(jià)值是什么?我認(rèn)為是給用戶創(chuàng)造良好的交互體驗(yàn)。前端性能對(duì)用戶體驗(yàn)、對(duì)業(yè)務(wù)跳失率的影響，在業(yè)界已有共識(shí)，不言而喻。根據(jù) Google 的數(shù)據(jù)，如果移動(dòng)站點(diǎn)的加載時(shí)間超過 3 秒，53% 的用戶會(huì)放棄訪問；加載時(shí)間從 1s 延長到 3s 時(shí)，跳失率增加32%；加載時(shí)間從 1s 延長到 5s 時(shí)，跳失率增加90%；——用戶還沒看到辛苦優(yōu)化的頁面，就走了一部分 。

（參考文末鏈接）

抵達(dá)率優(yōu)化應(yīng)該在轉(zhuǎn)化率之前，用戶能夠正常訪問網(wǎng)頁，網(wǎng)頁的內(nèi)容才能產(chǎn)生價(jià)值。所以在優(yōu)化著陸頁內(nèi)容、提高轉(zhuǎn)化率之前，要先保障抵達(dá)率。抵達(dá)率太低，哪怕頁面轉(zhuǎn)化100%，整體的轉(zhuǎn)化效果也會(huì)很差。

?  測(cè)試把控難點(diǎn)

現(xiàn)在流行的，運(yùn)營自行搭建頁面+自行多端投放方式，使我們的不可控。

原先發(fā)現(xiàn)性能問題主要通過感受+性能跑測(cè)數(shù)據(jù)，或者運(yùn)營以業(yè)務(wù)要挾、或者質(zhì)疑受機(jī)器等因素影響、或者相互推諉主要瓶頸點(diǎn)，使優(yōu)化無法落實(shí)。

部分性能優(yōu)化困難，影響性能點(diǎn)比較復(fù)雜，實(shí)行優(yōu)化的收益不可預(yù)知，也阻礙了優(yōu)化的落實(shí)。

前端性能優(yōu)化 測(cè)試視角的解法

很多人都以為，前端性能優(yōu)化，重點(diǎn)在“前端”優(yōu)化，“測(cè)試”很難起到主導(dǎo)作用。試著換個(gè)角度，從整個(gè)研發(fā)團(tuán)隊(duì)視角看，前端做運(yùn)動(dòng)員專項(xiàng)治理，測(cè)試做裁判員專項(xiàng)評(píng)測(cè)，這套機(jī)制，是否更能切實(shí)做到優(yōu)化，達(dá)成的數(shù)據(jù)也更讓大家信賴？再者，測(cè)試不止局限于此，還可做隊(duì)醫(yī)、分析師......

?  可持續(xù)優(yōu)化閉環(huán)

以下持續(xù)優(yōu)化閉環(huán)，是我們摸索著實(shí)行了一年多，有效且高效的解法。

從上圖看，整個(gè)過程為：

step0、前端事先進(jìn)行埋點(diǎn)，（一般前端做了sdk，直接引入即可）step1、測(cè)試通過性能黑榜，發(fā)現(xiàn)最為突出的重點(diǎn)性能問題頁面（首屏平均時(shí)長&秒開率，PV&業(yè)務(wù)意義， 多項(xiàng)結(jié)合度量）step2、協(xié)助前端一起專業(yè)分析問題頁面，找出性能瓶頸點(diǎn)step3、前端更有策略地針對(duì)性治理step4、查看性能趨勢(shì)變化，驗(yàn)證優(yōu)化效果step5、假設(shè)已達(dá)到優(yōu)化預(yù)期，或者有更糟糕的頁面把之前頁面擠下去，繼續(xù)關(guān)注黑榜前列的頁面（即跳到step1，繼續(xù)輪轉(zhuǎn)）核心是step1.發(fā)現(xiàn)問題，通過持續(xù)發(fā)現(xiàn)問題，推動(dòng)持續(xù)的優(yōu)化輪轉(zhuǎn)我們可以發(fā)現(xiàn)，測(cè)試通過發(fā)現(xiàn)、分析、驗(yàn)證三板斧，驅(qū)動(dòng)推進(jìn)頁面性能優(yōu)化。

?  效果明顯

從2021年10月份開始迭代以來，共發(fā)現(xiàn)了8類嚴(yán)重性能問題。

包括：端外（支付寶）性能問題，外投&跨端性能問題，pha架構(gòu)性能問題，運(yùn)營不規(guī)范配置導(dǎo)致、其他業(yè)務(wù)原因?qū)е碌男阅軉栴}等。

并且快速有效，在業(yè)務(wù)方或其他同學(xué)提過來之前，我們都已經(jīng)發(fā)現(xiàn)并有了分析，在優(yōu)化節(jié)奏上更具有主動(dòng)性。

性能問題的發(fā)現(xiàn)

通過線上用戶的真實(shí)采集，并制定能反應(yīng)用戶體感的指標(biāo)，進(jìn)行性能黑榜和全局趨勢(shì)分析。

從重點(diǎn)單點(diǎn)角度，我們通過性能黑榜；從整體視角，我們通過整體趨勢(shì)分析。

?  性能數(shù)據(jù)的采集

• 幾個(gè)名詞解釋

ARMS前端監(jiān)控專注于對(duì)Web場(chǎng)景、小程序場(chǎng)景的監(jiān)控，從頁面打開速度（測(cè)速）、頁面穩(wěn)定性（JS診斷錯(cuò)誤）和外部服務(wù)調(diào)用成功率（API）這三個(gè)方面監(jiān)測(cè)Web和小程序頁面的健康度。

SLS日志服務(wù)為Log、Metric、Trace等數(shù)據(jù)提供大規(guī)模、低成本、實(shí)時(shí)的平臺(tái)化服務(wù)。日志服務(wù)一站式提供數(shù)據(jù)采集、加工、查詢與分析、可視化、告警、消費(fèi)與投遞等功能。

ODPS即MaxCompute，是適用于數(shù)據(jù)分析場(chǎng)景的企業(yè)級(jí)SaaS模式云數(shù)據(jù)倉庫。

FBI是阿里內(nèi)的智能大數(shù)據(jù)分析和可視化平臺(tái)，下面的所有截圖都是在FBI平臺(tái)配置圖表而成，還未對(duì)外開放。

• 全過程

arms-sdk結(jié)合前端的自定義埋點(diǎn)，在海量用戶訪問的同時(shí)，就會(huì)自動(dòng)上報(bào)數(shù)據(jù)到sls日志庫，整體過程如下圖：

1. 針對(duì)H5搭建頁的埋點(diǎn)，使用通用方案，一次性埋點(diǎn)即可，前端后續(xù)無需額外埋。
2. sls日志報(bào)表查實(shí)時(shí)數(shù)據(jù)，用于實(shí)時(shí)分析，實(shí)時(shí)驗(yàn)證。
3. ODPS數(shù)據(jù)長期存儲(chǔ)已計(jì)算完指標(biāo)的數(shù)據(jù)，用于記錄、比較、趨勢(shì)分析。

?  性能指標(biāo)的確定

• 統(tǒng)計(jì)范圍--用戶視角

所有前臺(tái)頁面，每個(gè)用戶每次瀏覽的有效數(shù)據(jù)（完全加載<15s 內(nèi)有效）

指標(biāo)的影響因子：從用戶視角，頁面流量越大，則對(duì)整體數(shù)據(jù)的影響越大（也就是權(quán)重越大）

這樣做的好處：流量越大數(shù)值越嚴(yán)重的，優(yōu)化的效果（正反饋）越明顯，確定了治理性能問題的優(yōu)先級(jí)。

• 三個(gè)指標(biāo)

結(jié)合天貓?zhí)詫殹⒁约凹瘓F(tuán)其他部門的

?  性能黑榜

為何要用性能黑榜來作為主要發(fā)現(xiàn)手段？我們通常可推理得：

1. 排在性能黑榜前列的，必然是性能問題最突出的，相對(duì)方便分析（可根據(jù)各自業(yè)務(wù)，加個(gè)樣本量的篩選，如我們看每日pv 10w以上的）
2. ?再結(jié)合樣本量（pv正相關(guān)）數(shù)據(jù)，樣本量非常大的，性能優(yōu)化的收益必然也是非常大
3. 模塊化組件開發(fā)盛行的今天，優(yōu)化某個(gè)模塊或場(chǎng)景的問題，收益點(diǎn)不僅僅在當(dāng)前頁面，也在其他用了同樣模塊或場(chǎng)景的頁
4. 榜單形式，更能引起老板、對(duì)應(yīng)前端負(fù)責(zé)同學(xué)、對(duì)用戶體驗(yàn)關(guān)注的同學(xué)的重視

?  整體性能趨勢(shì)分析

整體趨勢(shì)分析，即是為在整體角度，看我們的頁面性能趨勢(shì)，它是重要的度量指標(biāo)。這里我們把所有的流量都納入，沒有頁面的區(qū)分，為的是基于用戶維度，流量大的頁面權(quán)重自然會(huì)更大。

從上圖看，1月初到2月中旬的數(shù)據(jù)正在持續(xù)惡化，必須要采取措施治理！

性能問題的分析

（下文以2022年2月A頻道頁面為例，均為dummy仿造后數(shù)據(jù)，也不代表整體情況）

?  如何衡量性能問題嚴(yán)重性

衡量性能問題嚴(yán)重性，是為了讓大家意識(shí)到優(yōu)化的必要性，以及急迫性

• 進(jìn)入性能黑榜前幾名

同性能黑榜章節(jié)，不贅述

• 看完全加載時(shí)長分布

見下圖“可交互時(shí)長分布圖”，一個(gè)記錄代表一個(gè)用戶。

即使不去統(tǒng)計(jì)，我們都能很明顯的看出來，這個(gè)A頻道頁面：

<1.5s的比例很低1.5~3s占比最大>3s的比例相對(duì)而言很高，居然還有這么高比例在8s以上？

• 看時(shí)長分布比例

和開發(fā)說明問題嚴(yán)重性時(shí)，這個(gè)會(huì)很有代入感，比如見下圖，10%的Android用戶在4.9s以上，是不是可以認(rèn)為他們大部分都跳失了？

• 看和總體數(shù)據(jù)的對(duì)比

下圖不用算都能明顯發(fā)現(xiàn)，秒開率和整體數(shù)據(jù)差異實(shí)在太大

?  分析性能瓶頸-分析思路

首先要明確，性能分析主要是給相關(guān)頁面的前端、開發(fā)同學(xué)看，給關(guān)心問題的測(cè)試同學(xué)看，所以我們可以拆分的更細(xì)節(jié)、更專業(yè)。可以先分前端、后端2個(gè)大類：

?  分析性能瓶頸-前端環(huán)節(jié)

• 分終端分析

業(yè)務(wù)因素（具體不表），分終端是重點(diǎn)。

從可交互時(shí)長、秒開率、3秒+率、5秒+率，分別分析，都能論證--支付寶端問題更明顯。

• 分階段分析

下圖將t1~t9 每個(gè)階段打點(diǎn)情況可視化，并分析重點(diǎn)環(huán)節(jié)的差值（打點(diǎn)邏輯由前端定義）

見下圖可以明顯觀察到：

1、接口耗時(shí)太久，且2.12后變差明顯（可以去追溯下2.12發(fā)生了什么）；

2、LBS獲取耗時(shí)很久，高于平均1倍以上，而取lbs是A頻道頁的關(guān)鍵邏輯

• 分高中低端機(jī)分析

我們根據(jù)淘寶的高中低端機(jī)評(píng)判標(biāo)準(zhǔn)，埋點(diǎn)獲得數(shù)據(jù)。平均時(shí)長，高中低各自占比，以及低端時(shí)長分布（也可選中高端）。下圖可發(fā)現(xiàn)，低端機(jī)比例很低（需要思考是否有必要重點(diǎn)優(yōu)化），但低端機(jī)超過3秒以上的比例遠(yuǎn)高于其他的（和總體的完全時(shí)間分布對(duì)比） 。

• 其他分析

包括：機(jī)型、系統(tǒng)等，可做參考

?  分析性能瓶頸-后端環(huán)節(jié)

• 后端接口分析

主要從后端維度來分析

1. 服務(wù)端鏈路邏輯，需要另做具體分析
2. 分頁面的處理邏輯，需要結(jié)合業(yè)務(wù)邏輯來看

這里可見，下圖盡管是開始發(fā)起請(qǐng)求-》收到請(qǐng)求的全過程，但也嚴(yán)重超標(biāo)（幾乎是標(biāo)準(zhǔn)值的2倍）

• 網(wǎng)絡(luò)傳輸消耗分析

整個(gè)接口過程：

請(qǐng)求連接(apiConnect)--》服務(wù)端處理(apiRequest)--》數(shù)據(jù)下載(apiResponse)細(xì)節(jié)不表了

?  分析結(jié)論關(guān)鍵思路

1. 數(shù)據(jù)差值越大的，樣本量越多的，性能數(shù)據(jù)優(yōu)化越明顯
2. 結(jié)合業(yè)務(wù)意義
3. 為前端分析提供方向，更細(xì)節(jié)分析，還是要依賴前端的專業(yè)分析

還是以A頻道為例，從數(shù)據(jù)差值看，接口和lbs，和均值差異最大。從樣本量看，支付寶流量占有一定比例，因此，我們優(yōu)化的重點(diǎn)在：接口、LBS、支付寶端。

性能問題的驗(yàn)證

主要通過單頁面性能趨勢(shì)分析，主要2個(gè)作用

1. 驗(yàn)證性能優(yōu)化效果，做到可量化
2. 及時(shí)洞察到頁面性能向差的趨勢(shì)，更具有主動(dòng)性

?  性能惡化及時(shí)反饋 

再如下圖，今年1月，一次業(yè)務(wù)需求，致使性能變差，通過每周定時(shí)性能報(bào)表發(fā)送群里，馬上發(fā)現(xiàn)。推薦大家把性能趨勢(shì)圖，定時(shí)發(fā)送到群內(nèi)，更及時(shí)發(fā)現(xiàn)。

?  性能優(yōu)化效果驗(yàn)證

參考鏈接：https://zhuanlan.zhihu.com/p/51673262

團(tuán)隊(duì)介紹

阿里拍賣-技術(shù)質(zhì)量團(tuán)隊(duì)，創(chuàng)新業(yè)務(wù)新賽道，建立和完善一套適合阿里拍賣業(yè)務(wù)的測(cè)試體系。結(jié)合搜索，數(shù)據(jù)，算法，導(dǎo)購，營銷，交易，直播等多領(lǐng)域的測(cè)試能力，繼續(xù)深度拓展自動(dòng)化，性能測(cè)試，業(yè)務(wù)監(jiān)控，精準(zhǔn)測(cè)試，代碼覆蓋等方面的測(cè)試價(jià)值。