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

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

性能指標

性能優(yōu)化的第一步是要定義好指標，指標能幫助我們衡量優(yōu)化結果的好壞，是指導我們?nèi)绾芜M一步優(yōu)化的標準。

如何定義指標

有幾個途徑可以定義出合理的指標：

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

常見指標

來自 web.dev

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

優(yōu)化鏈路

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

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

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

最佳實踐

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

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

最佳實踐

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

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

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

最佳實踐

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

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

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

最佳實踐

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

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

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

PFDL 分為以下部分：新人培訓，性能評估，檢測和自動化，監(jiān)控和驗證。

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

性能培訓

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

性能評估

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

檢測和自動化

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

監(jiān)控和驗證

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

關于本公眾號

我們是字節(jié)跳動飛書文檔團隊，致力于打造全球最領先的文檔類創(chuàng)作和內(nèi)容管理工具。飛書文檔匯集了在線文檔、表格、思維筆記等在線創(chuàng)作工具，并提供安全、強大的云端存儲、內(nèi)容管理和知識庫，對文檔、表格和文件都可以靈活設置瀏覽、編輯、評論、分享等權限，讓團隊協(xié)同既高效，又安全。?我們會定期分享前端技術和業(yè)務實踐，歡迎關注～