前端性能優(yōu)化4大環(huán)節(jié)最佳實(shí)踐與研發(fā)流程

大型項(xiàng)目發(fā)展到一個(gè)階段都繞不開(kāi)性能優(yōu)化，高性能是高品質(zhì)產(chǎn)品的重要特征。如何你是研發(fā)同學(xué)，你會(huì)關(guān)心如何入手優(yōu)化，優(yōu)化的鏈路都有哪些環(huán)節(jié)；如何你是Team Leader，你一定很關(guān)心用什么易于執(zhí)行，易于驗(yàn)證的研發(fā)流程，來(lái)指導(dǎo)前端團(tuán)隊(duì)交付高性能的產(chǎn)品，并確保產(chǎn)品的性能始終是健康的、可持續(xù)的。

本文我們將介紹前端優(yōu)化鏈路的全景圖和可持續(xù)的性能優(yōu)先研發(fā)流程。

性能指標(biāo)

性能優(yōu)化的第一步是要定義好指標(biāo)，指標(biāo)能幫助我們衡量?jī)?yōu)化結(jié)果的好壞，是指導(dǎo)我們?nèi)绾芜M(jìn)一步優(yōu)化的標(biāo)準(zhǔn)。

如何定義指標(biāo)

有幾個(gè)途徑可以定義出合理的指標(biāo)：

對(duì)齊業(yè)界標(biāo)準(zhǔn)指標(biāo)：適合一些常見(jiàn)的指標(biāo)，比如 TTI < 4s。對(duì)齊競(jìng)品的指標(biāo)：競(jìng)品是最好的老師，調(diào)研發(fā)現(xiàn)我們和競(jìng)品的差距，優(yōu)化到競(jìng)品的標(biāo)準(zhǔn)就是進(jìn)步。根據(jù)業(yè)務(wù)的數(shù)據(jù)來(lái)定指標(biāo)：當(dāng)我們的業(yè)務(wù)比較特殊，或者我們需要更高的標(biāo)準(zhǔn)，而又沒(méi)有競(jìng)品可以參考時(shí)，我們可以先分析上報(bào)數(shù)據(jù)，根據(jù)數(shù)據(jù)的平均值來(lái)求一個(gè)合理的值，比如 指標(biāo)值=平均值/2。

常見(jiàn)指標(biāo)

來(lái)自 web.dev

前端如何計(jì)算并收集上報(bào)這些指標(biāo)，是另一個(gè)話題了，可以關(guān)注我們的公眾號(hào)，后續(xù)會(huì)發(fā)布《端體驗(yàn)優(yōu)化之全鏈路監(jiān)控》的相關(guān)文章。

優(yōu)化鏈路

前端性能優(yōu)化有很多維度，我們可以歸類為幾個(gè)環(huán)節(jié)：構(gòu)建環(huán)節(jié)、網(wǎng)絡(luò)環(huán)節(jié)、渲染環(huán)節(jié)、應(yīng)用環(huán)節(jié)。當(dāng)這幾個(gè)環(huán)節(jié)實(shí)現(xiàn)全流程優(yōu)化時(shí)，性能可以達(dá)到更優(yōu)的表現(xiàn)。而每個(gè)環(huán)節(jié)都有各自的優(yōu)化手段，下面我們就介紹這幾個(gè)環(huán)節(jié)的優(yōu)化最佳實(shí)踐和案例。（篇幅有限，我們還有很多的優(yōu)化案例比如 飛書(shū)前端項(xiàng)目打包時(shí)間優(yōu)化，SSR，MPA專項(xiàng)，HTTP3升級(jí)等等，后續(xù)后會(huì)以單獨(dú)的文章發(fā)出～）

構(gòu)建環(huán)節(jié)優(yōu)化

架構(gòu)升級(jí)也是性能優(yōu)化的重要手段，需要構(gòu)建環(huán)節(jié)支撐，比如支持 SPA 構(gòu)建，支持 MPA 構(gòu)建，支持微前端構(gòu)建。工欲善其事，必先利其器，優(yōu)化構(gòu)建時(shí)間縮短能大幅度提升研發(fā)體驗(yàn)，為快速驗(yàn)證性能優(yōu)化結(jié)果做好準(zhǔn)備。構(gòu)建系統(tǒng)優(yōu)化能提升研發(fā)效率，是個(gè)很大的話題，我們就提一些通用的思路。

最佳實(shí)踐

網(wǎng)絡(luò)環(huán)節(jié)優(yōu)化

通常網(wǎng)頁(yè)加載超過(guò)4s還沒(méi)看到東西，用戶就感知到慢了，大于 10s 會(huì)放棄等待。網(wǎng)絡(luò)優(yōu)化若能升級(jí)網(wǎng)絡(luò)協(xié)議，會(huì)得到質(zhì)的提升，比如升級(jí)到 HTTP2.0 支持并行下載。Chrome 已經(jīng)支持 HTTP3.0（默認(rèn)關(guān)閉），底層基于 UDP，自家的網(wǎng)頁(yè)應(yīng)用直接享受 0-RTT。現(xiàn)在網(wǎng)頁(yè)應(yīng)用光加載靜態(tài)資源的體積動(dòng)不動(dòng)就 幾MB到 十幾 MB，光靠升級(jí)服務(wù)和協(xié)議是不夠的，前端也需要很多優(yōu)化策略，比如采用服務(wù)端渲染、升級(jí)架構(gòu)。

最佳實(shí)踐

「性能優(yōu)化鏈路之網(wǎng)絡(luò)環(huán)節(jié) 」

渲染環(huán)節(jié)優(yōu)化

渲染優(yōu)化保障是用戶體驗(yàn)的流暢性的重要環(huán)節(jié)，而且渲染性能會(huì)影響內(nèi)存和 CPU 的持續(xù)占有。通常我們認(rèn)為的流暢是指幀數(shù)達(dá)到 60FPS 或穩(wěn)定 30PFS，瀏覽器繪制一幀一般需要 10ms，用戶在操作過(guò)程中有響應(yīng)延時(shí)的時(shí)間不同用戶體驗(yàn)也不同：

最佳實(shí)踐

「性能優(yōu)化鏈路之渲染環(huán)節(jié) 」

應(yīng)用環(huán)節(jié)優(yōu)化

再好的網(wǎng)絡(luò)環(huán)境也比不上離線加載的速度，無(wú)論是加載速度還是交互流暢性，前端其實(shí)一直在追趕原生的體驗(yàn)。主要圍繞著離線優(yōu)化、熱更和跨端渲染框架。

最佳實(shí)踐

「性能優(yōu)化鏈路之應(yīng)用環(huán)節(jié) 」

PFDL - 性能優(yōu)先研發(fā)流程

性能優(yōu)先研發(fā)流程（Performance First Development Lifecycle，簡(jiǎn)稱 PFDL）。PFDL 專注于性能，以較小的成本影響現(xiàn)有研發(fā)流程，提升產(chǎn)品整體性能的水準(zhǔn)，交付高質(zhì)量的產(chǎn)品體驗(yàn)為目標(biāo)。

PFDL 分為以下部分：新人培訓(xùn)，性能評(píng)估，檢測(cè)和自動(dòng)化，監(jiān)控和驗(yàn)證。

「PFDL - 性能優(yōu)先研發(fā)流程 」

性能培訓(xùn)

開(kāi)發(fā)團(tuán)隊(duì)不斷有新人加入，性能優(yōu)先必須深入人心，那么培訓(xùn)是必不可少的。培訓(xùn)的內(nèi)容包括高性能編碼最佳實(shí)踐，性能分析最佳實(shí)踐等。培訓(xùn)講師，可來(lái)自團(tuán)隊(duì)經(jīng)驗(yàn)豐富的研發(fā)人員，也可請(qǐng)業(yè)界大牛，甚至網(wǎng)絡(luò)上優(yōu)質(zhì)付費(fèi)/免費(fèi)資源。培訓(xùn)將是周期性進(jìn)行的，系統(tǒng)化的，內(nèi)容覆蓋全面的。

性能評(píng)估

以用戶體驗(yàn)為中心，定義出關(guān)鍵指標(biāo)標(biāo)準(zhǔn)，可以借鑒 Google 的 RAIL 模型/Web Vitals，對(duì)比競(jìng)品，現(xiàn)有產(chǎn)品的性能進(jìn)行評(píng)估：可交互時(shí)間，CPU 占用率，內(nèi)存占用率，流暢度等。應(yīng)該在各個(gè)環(huán)節(jié)加入性能評(píng)估，包括產(chǎn)品需求環(huán)節(jié)，UX/UI 設(shè)計(jì)環(huán)節(jié)，技術(shù)方案環(huán)節(jié)，編碼環(huán)節(jié)，Code Review 環(huán)節(jié)，QA/E2E 環(huán)節(jié)等。對(duì)性能 issue 需要優(yōu)先級(jí)的評(píng)估：P0/P1/P2。

檢測(cè)和自動(dòng)化

我們需要更多工具，能幫助我們更高效檢測(cè)出性能的問(wèn)題，能自動(dòng)優(yōu)化代碼的性能。我們需要網(wǎng)羅或設(shè)計(jì)開(kāi)發(fā)這些工具，這些工具盡可能的做到相互關(guān)聯(lián)，相互輔助，并可流程化，盡可能的自動(dòng)化。

監(jiān)控和驗(yàn)證

監(jiān)控?cái)?shù)據(jù)如何反應(yīng)接近真實(shí)的用戶體驗(yàn)始終是個(gè)難點(diǎn)，定義規(guī)范的日志，建設(shè)有效的面板，使用強(qiáng)大的工具，能幫助我們主動(dòng)關(guān)注產(chǎn)品的質(zhì)量提前采取優(yōu)化行動(dòng)，同時(shí)更有效的在海量日志中追蹤性能問(wèn)題 Root Cause，快速定位問(wèn)題直到修復(fù)。

點(diǎn)擊下方“技術(shù)漫談”，選擇“設(shè)為星標(biāo)”
第一時(shí)間關(guān)注技術(shù)干貨！