1 寫在前面

我們?cè)谶M(jìn)行網(wǎng)站或者APP開發(fā)后，最擔(dān)心的就是用戶訪問時(shí)出現(xiàn)頁(yè)面卡頓、白屏等性能問題，嚴(yán)重影響用戶體驗(yàn)。現(xiàn)在大公司都會(huì)在性能提升和優(yōu)化上下大功夫，會(huì)設(shè)置個(gè)前端性能標(biāo)準(zhǔn)和開發(fā)預(yù)警監(jiān)控平臺(tái)。那么前端性能優(yōu)化一般比較瑣碎繁雜，我們應(yīng)該如何將瑣碎的工作進(jìn)行系統(tǒng)化呢?

2 性能優(yōu)化流程

在進(jìn)行性能優(yōu)化處理前，我們首先得知道性能優(yōu)化的相關(guān)流程，這樣我們嚴(yán)格按照流程進(jìn)行處理即可。與此同時(shí)，指定優(yōu)化實(shí)踐流程是確保信任也可以按照?qǐng)?zhí)行，這是優(yōu)化成果得以長(zhǎng)期保持的重要保障，也是我們后期維護(hù)的動(dòng)力。

性能優(yōu)化流程有：

1. 指標(biāo)設(shè)定
2. 性能標(biāo)準(zhǔn)
3. 收益評(píng)估
4. 診斷清單
5. 優(yōu)化手段
6. 性能立項(xiàng)
7. 性能實(shí)踐

指標(biāo)設(shè)定和性能標(biāo)準(zhǔn)： 我們要選擇什么樣的指標(biāo)作為風(fēng)向標(biāo)?設(shè)定指標(biāo)后，就是確定性能標(biāo)準(zhǔn)即我們的性能優(yōu)化目標(biāo)是什么樣的?性能要優(yōu)化到什么程度算是合適的?

收益評(píng)估： 當(dāng)我們做出這些性能優(yōu)化的處理時(shí)，其實(shí)是需要關(guān)聯(lián)產(chǎn)品目標(biāo)進(jìn)行收益評(píng)估，如果沒有收益做出這些改變就不存什么意義了。做性能優(yōu)化是為了服務(wù)于產(chǎn)品、提升用戶體驗(yàn)，而不是在進(jìn)行重復(fù)無意義的造輪子。

診斷清單： 其實(shí)在我們?cè)谏a(chǎn)過程中，有很多性能問題并不是立刻能夠監(jiān)聽到的，對(duì)此需要將我們編寫的業(yè)務(wù)代碼接入到性能監(jiān)控預(yù)警平臺(tái)，根據(jù)性能標(biāo)準(zhǔn)給出診斷清單，方便我們進(jìn)行后續(xù)的改進(jìn)和優(yōu)化。

優(yōu)化手段： 在監(jiān)控預(yù)警平臺(tái)給出我們代碼的診斷清單后，我們需要結(jié)合性能標(biāo)準(zhǔn)針對(duì)性能標(biāo)準(zhǔn)確定相應(yīng)的優(yōu)化手段。

性能立項(xiàng)： 我們進(jìn)行性能項(xiàng)目立項(xiàng)時(shí)，是需要產(chǎn)品和后端同學(xué)的支持的，也是我們進(jìn)行性能優(yōu)化流程不可或缺的內(nèi)容。

性能實(shí)踐： 經(jīng)歷過性能優(yōu)化的項(xiàng)目需要重新發(fā)起上線，并跟蹤進(jìn)行效果評(píng)估，結(jié)合場(chǎng)景把這些項(xiàng)目成果以文檔或代碼的形式沉淀下來，方便我們后續(xù)的學(xué)習(xí)和總結(jié)經(jīng)驗(yàn)。

3 性能指標(biāo)采集與上報(bào)

前面我們提到了性能優(yōu)化的基本流程，其中重要環(huán)境就需要依賴于監(jiān)控預(yù)警平臺(tái)，需要對(duì)性能采集以及上報(bào)進(jìn)行可視化。那么我們現(xiàn)在就需要把前面提到的性能指標(biāo)以代碼的形式進(jìn)行實(shí)施落地，進(jìn)行分解落地確保可以采集到發(fā)現(xiàn)的性能問題，然后再進(jìn)行SDK封裝后集合統(tǒng)計(jì)埋點(diǎn)，最后根據(jù)實(shí)際情況，指定上報(bào)策略。具體的有：

1. 指標(biāo)分解
2. 指標(biāo)采集
3. SDK封裝
4. 統(tǒng)計(jì)埋點(diǎn)
5. 上報(bào)策略
6. 數(shù)據(jù)預(yù)處理

性能監(jiān)控預(yù)警平臺(tái)主要分為：性能數(shù)據(jù)處理后臺(tái)、性能可視化展現(xiàn)前臺(tái)以及性能數(shù)據(jù)存儲(chǔ)三部分。

性能數(shù)據(jù)處理后臺(tái)：主要在性能采集數(shù)據(jù)上報(bào)到性能平臺(tái)后，對(duì)數(shù)據(jù)進(jìn)行預(yù)處理、數(shù)據(jù)清晰和數(shù)據(jù)計(jì)算，然后生成前臺(tái)可視化所需數(shù)據(jù)。

性能可視化展示前臺(tái)：主要是對(duì)核心數(shù)據(jù)指標(biāo)進(jìn)行可視化展示，對(duì)性能數(shù)據(jù)波動(dòng)進(jìn)行監(jiān)控，當(dāng)指標(biāo)超過某個(gè)監(jiān)控閾值時(shí)，性能監(jiān)控預(yù)警平臺(tái)會(huì)通過郵件或者短信以及其他通知形式給我們發(fā)送預(yù)警信息。

性能數(shù)據(jù)存儲(chǔ)：此部分主要是進(jìn)行采集和上報(bào)的性能數(shù)據(jù)存儲(chǔ)，方便后續(xù)進(jìn)行數(shù)據(jù)分析和數(shù)據(jù)可視化處理。

4 性能監(jiān)控預(yù)警平臺(tái)

在我們的項(xiàng)目開發(fā)完畢后，在準(zhǔn)備上線前一定要做性能專項(xiàng)測(cè)試，檢查下你采取的措施和性能優(yōu)化預(yù)期是否一致。

在整個(gè)性能優(yōu)化體系中，你覺得最開始要做的事情是哪一個(gè)?比如說，在你們公司開發(fā)的APP活動(dòng)頁(yè)出現(xiàn)了加載數(shù)據(jù)卡頓的性能問題時(shí)，我們應(yīng)該如何進(jìn)行優(yōu)化呢?

當(dāng)然，首要的步驟是確定它的性能指標(biāo)及其標(biāo)準(zhǔn)是什么?只有設(shè)定好了性能指標(biāo)，知道了它的標(biāo)準(zhǔn)，后續(xù)我們才能知道圍繞它如何進(jìn)行性能優(yōu)化。

那么什么樣的指標(biāo)是值得我們關(guān)注的呢?當(dāng)然是圍繞著用戶進(jìn)行服務(wù)和優(yōu)化體驗(yàn)的可衡量的數(shù)據(jù)，可衡量即是可以通過代碼來度量的，關(guān)注以用戶為中心的關(guān)鍵結(jié)果和真實(shí)體驗(yàn)的。

關(guān)鍵結(jié)果：我們知道要關(guān)注用戶關(guān)心的信息，那么用戶到底關(guān)心的是什么呢?當(dāng)用戶進(jìn)入商品詳情頁(yè)面時(shí)，他當(dāng)然關(guān)注的是這個(gè)商品怎么樣，具體到頁(yè)面上的就是商品描述、商品頭圖、商品價(jià)格、商品銷量以及如何購(gòu)買按鈕等關(guān)鍵信息。

真實(shí)體驗(yàn)：真實(shí)體驗(yàn)當(dāng)然是使用產(chǎn)品的感受，比如用戶進(jìn)入列表頁(yè)，在滑動(dòng)過程中頁(yè)面加載突然跳出一個(gè)彈窗，他會(huì)不會(huì)覺得煩躁呢?又比如我們?cè)谀甑赘鞔笃脚_(tái)都會(huì)有年度報(bào)告，那么如果用戶在進(jìn)行滑動(dòng)切換頁(yè)面視頻、動(dòng)畫和音樂播放并不是那么的流暢，這就會(huì)對(duì)產(chǎn)品預(yù)期想要得到的效果大打折扣。

5 性能優(yōu)化關(guān)鍵指標(biāo)設(shè)定及標(biāo)準(zhǔn)

在性能優(yōu)化關(guān)鍵指標(biāo)方面，當(dāng)前業(yè)界主要集中在加載方面，特別是頁(yè)面的白屏?xí)r間和首屏?xí)r間。除了手動(dòng)采集埋點(diǎn)上報(bào)外，還可以自動(dòng)化采集上報(bào)，但是交互性和視覺穩(wěn)定性關(guān)鍵指標(biāo)，業(yè)界還在探索中，沒有達(dá)成統(tǒng)一的衡量標(biāo)準(zhǔn)，因此當(dāng)前必須進(jìn)行手動(dòng)采集。

加載：就是在進(jìn)入頁(yè)面時(shí)，頁(yè)面從白頁(yè)加載到顯示的載入過程。在你打開網(wǎng)站頁(yè)面時(shí)，你會(huì)發(fā)現(xiàn)有的網(wǎng)站首頁(yè)上的文字、圖片出現(xiàn)得很緩慢，但是有的加載有很快，這個(gè)內(nèi)容出現(xiàn)的過程就是加載過程。

視覺穩(wěn)定性指標(biāo)：CLS(Cumulative Layout Shift)也就是布局偏移量，它是指頁(yè)面從一幀切換到另外一幀時(shí)，視線中不穩(wěn)定元素的偏移情況。當(dāng)前視覺穩(wěn)定性指標(biāo)CLS比較前沿，它的采集方法除了依賴Google的Lighthouse做本地采集，沒有更好的處理方案。比如說：你正要點(diǎn)擊頁(yè)面購(gòu)買鏈接的時(shí)候，原先的位置突然插入了一個(gè)9.9包郵搶購(gòu)的廣告，那么用戶就點(diǎn)進(jìn)了商品廣告頁(yè)面，你說尷尬不?

交互方面指標(biāo)：FID指標(biāo)(First Input Delay，首次輸入延遲)指標(biāo)必須盡量小于100ms，PSI(Perceptual Speed Index，視覺變化率)衡量標(biāo)準(zhǔn)是小于20%。

白屏?xí)r間：指的是從輸入內(nèi)容回車(包括刷新、跳轉(zhuǎn)等方式)后到頁(yè)面開始出現(xiàn)第一個(gè)字符的時(shí)間，標(biāo)準(zhǔn)時(shí)間是300ms。

首屏?xí)r間：首屏?xí)r間的計(jì)算是”首屏?xí)r間=白屏?xí)r間+渲染時(shí)間“。首屏加載是被討論最多的話題,一方面web 前端首屏的加載性能的確普遍較差,另一方面,首屏的加載速度至關(guān)重要,很多時(shí)候過長(zhǎng)的白屏?xí)?dǎo)致用戶還沒有體驗(yàn)到網(wǎng)站功能的時(shí)候就流失了,首屏速度是用戶留存的關(guān)鍵點(diǎn)。

• 從重要性角度看，在用戶打開頁(yè)面后第一眼看到的內(nèi)容是非常重要的，比如電商頁(yè)面的頭圖、商品價(jià)格、購(gòu)買按鈕等。這些內(nèi)容即使在最惡劣的網(wǎng)絡(luò)環(huán)境下，也要確保用戶能夠看到。
• 從體驗(yàn)完整性角度看，進(jìn)入頁(yè)面后先是白屏，隨著第一個(gè)字符加載到首屏內(nèi)容顯示結(jié)束，我們才會(huì)認(rèn)為加載完畢，用戶可以使用了。

首屏?xí)r間的標(biāo)準(zhǔn)，最初只是根據(jù)這個(gè)頁(yè)面對(duì)時(shí)間的敏感度進(jìn)行判定的，主要以用戶平均首屏加載時(shí)間進(jìn)行計(jì)算的，并沒有詳細(xì)區(qū)分2G/3G/4G/wifi這些網(wǎng)絡(luò)環(huán)境。

注意：最佳：白屏<1s，首屏<1.5s，onload<3s

首屏?xí)r間在1s內(nèi)，用戶就會(huì)感覺加載速度很快，如果超過2.5s就會(huì)感到很慢。在1s內(nèi)打開頁(yè)面，人們對(duì)于這么短的時(shí)間敏感度就不是很明顯，感知不出10ms和50ms有啥區(qū)別。當(dāng)?shù)搅?G/3G弱網(wǎng)環(huán)境，或者網(wǎng)絡(luò)不穩(wěn)定的環(huán)境條件下，用戶聯(lián)網(wǎng)加載的時(shí)間會(huì)變得特別長(zhǎng)，嚴(yán)重影響整體指標(biāo)。

對(duì)此，又有人們開始采用中位數(shù)坐正態(tài)分布，看分位值統(tǒng)計(jì)。P50(50分位值)、P90(90分位值)、P99(99分位值)，以P99為例，就是把所有首屏?xí)r間進(jìn)行排序得到排名第99位的首屏?xí)r間作為指標(biāo)，即P99。

后面又引入了指標(biāo)：秒開率，即1s內(nèi)打開用戶的占比。

首屏?xí)r間畢竟粒度還是比較粗的，如果首屏?xí)r間太長(zhǎng)，白屏?xí)r間段，那么到底是哪里出現(xiàn)的問題呢?

• 首屏?xí)r間：可以拆分為白屏?xí)r間、數(shù)據(jù)接口響應(yīng)時(shí)間、圖片加載資源時(shí)間等
• 白屏?xí)r間：數(shù)據(jù)接口響應(yīng)時(shí)間可以直接從后端宿務(wù)中獲取，不需要前端再重復(fù)計(jì)算

6 參考文章

《前端性能優(yōu)化方法與實(shí)踐》

7 寫在最后

本篇文章只是作為《前端性能優(yōu)化筆記系列》文章的開篇，引導(dǎo)讀者對(duì)于性能優(yōu)化體系有個(gè)更好的認(rèn)知，了解相關(guān)的指標(biāo)和指標(biāo)，因?yàn)閷W(xué)習(xí)性能優(yōu)化，并不是僅僅掌握一些優(yōu)化技巧而已，更應(yīng)該了解為什么要這樣做?