本文已發(fā)表在2017年8月《程序員》雜志。

我們?yōu)槭裁葱枰P(guān)注站點(diǎn)的性能，性能為什么如此重要呢？如今任何互聯(lián)網(wǎng)產(chǎn)品首先重要的都是流量，流量最終會轉(zhuǎn)換為商業(yè)價值。所以在互聯(lián)網(wǎng)產(chǎn)品中，流量、轉(zhuǎn)化率和留存率基本上是產(chǎn)品經(jīng)理或者業(yè)務(wù)非常關(guān)注的幾個因素，而性能則會直接影響到用戶的轉(zhuǎn)化和留存（在一定階段之后影響較大，產(chǎn)品初期功能的因素占比更大）。所以換言之性能，其實(shí)是錢，我們關(guān)注和監(jiān)測性能并非是為了數(shù)據(jù)而數(shù)據(jù)。產(chǎn)品的使用體驗(yàn)我認(rèn)為包含三大要素：產(chǎn)品功能、交互視覺、前端性能，而我們做性能優(yōu)化的最終目的是提升前端性能，從而提升產(chǎn)品體驗(yàn)。

值得慶幸的是，前端的性能優(yōu)化有諸多有跡可循的理論和方法，比如 Yahoo！性能軍規(guī)（Best Practices for Speeding Up Your Web Site）、Google PageSpeed Insights Rules（https://developers.google.com/speed/docs/insights/rules）。萬變不離其宗，諸如此類的性能優(yōu)化準(zhǔn)則都可以對應(yīng)到 Browser Processing Model 的不同階段。

根據(jù)圖 1 的 Processing Model，我們可以統(tǒng)計(jì)得到以下性能指標(biāo)：

redirect: timing.fetchStart - timing.navigationStart dns: timing.domainLookupEnd - timing.domainLookupStart connect: timing.connectEnd - timing.connectStart network: timing.connectEnd - timing.navigationStart load: timing.loadEventEnd - timing.navigationStart domReady: timing.domContentLoadedEventStart - timing.navigationStart interactive: timing.domInteractive - timing.navigationStart ttf: timing.fetchStart - timing.navigationStart ttr: timing.requestStart - timing.navigationStart ttdns: timing.domainLookupStart - timing.navigationStart ttconnect: timing.connectStart - timing.navigationStart ttfb: timing.responseStart - timing.navigationStart firstPaint: timing.msFirstPaint - timing.navigationStart

這些指標(biāo)對于前端而言都司空見慣，基本上核心關(guān)注的無外乎是：首字節(jié)時間（用于衡量網(wǎng)絡(luò)鏈路和服務(wù)器響應(yīng)性能）、白屏?xí)r間（firstPaint）、可交互時間（interactive）、完全加載時間（load）。我們在很長一段時間里都是根據(jù)這些指標(biāo)來量化分析我們的站點(diǎn)性能，似乎不曾認(rèn)真想過這些指標(biāo)是否能夠真正的反映用戶的感官性能。

顯然，這些指標(biāo)絕大部分都屬于非視覺指標(biāo)（Non-Visual Metrics），是體驗(yàn)優(yōu)化的常規(guī)指標(biāo)，更是體驗(yàn)和性能優(yōu)化中逃不開的關(guān)鍵因素，但卻并非感官指標(biāo)，也并不能完全衡量出用戶的感官性能（Perceptual Performance）。

所謂感官性能，即用戶直觀感知到的性能，用戶感受是一種非常主觀的判斷，那么如何衡量和統(tǒng)計(jì)感知性能？通常我們針對用戶感知會通過用研分析的方式（眼動儀、用戶溝通、用戶反饋、調(diào)研問卷、專家評估）來評估和衡量。但感官性能不同于用戶感受，是否有方式可以量化和衡量呢？筆者經(jīng)過一些調(diào)研和了解后，發(fā)現(xiàn)感官性能是可以通過一定方式進(jìn)行衡量、分析和對標(biāo)的，因?yàn)閷π阅艿母惺芨喾从吃谝曈X的變化上，因此我們可以通過一些視覺指標(biāo)來衡量感官性能：

First Paint Time First Contentful Paint Time First Meaningful Paint Time First Interactive Time Consistently Interactive Time Fisrt Visual Change Last Visual Change Speed Index Perceptual Speed Index

First Paint 又稱之為 First Non-Blank Paint，表示文檔中任一元素首次渲染的時間。First Contentful Paint 代表文檔中內(nèi)容元素（文本、圖像、Canvas，或者 SVG）首次渲染的時間。它通常情況下是無意義的渲染，比如頭部和導(dǎo)航條。First Meaningful Paint Time 代表首次有意義的渲染時間（它的統(tǒng)計(jì)在重大的布局變化之后，往往代表了用戶所關(guān)心的首次渲染時間），First Interactive Time、Consistently Interactive Time 分別表示首次可交互時間和持續(xù)可交互時間。

如圖 2 的流程圖展示了 Blink 內(nèi)核中 Time-to-first-X-paint 的分析原理和上報路徑（其他 first-X-paint 的指標(biāo)類似）。

Fisrt Visual Change、Last Visual Change 分別表示首次和最后一次視覺發(fā)生變化的時間點(diǎn)，Speed Index、Perceptual Speed Index 均為視覺速度，兩者的區(qū)別在于背后所用到的算法不同，前者采用了 Mean Pixel-Histogram Difference 算法，后者則采用了 Structural Similarity Image Metric 算法，其中 Perceptual Speed Index 的統(tǒng)計(jì)結(jié)果更貼近用戶的真實(shí)感受。Speed Index 的算法如下，它代表了我們頁面在加載過程中視覺上的變化速度，其值越小代表感官性能越好：

通過 FCP（First Contentful Paint）、FMP（First Meaningful Paint）、PSI（Perceptual Speed Index），我們可以實(shí)現(xiàn)跨平臺的感官性能分析和對標(biāo)（比如可以實(shí)現(xiàn) HTML5 和 Hybrid 對比，HTML5 和原生應(yīng)用的對比等），如圖 3 所示為我們項(xiàng)目中某列表頁的 SI 和 PSI 柱狀圖。

提及性能優(yōu)化分析工具，在開發(fā)階段我們擁有眾多的選擇（比如 Chrome 自帶的 Dev Tools、老牌的 YSlow、以及 Google 推出的 PageSpeed Insights），這里筆者強(qiáng)烈推薦的是 Lighthouse。Lighthouse 是一個開源的自動化工具，運(yùn)行 Lighthouse 的方式有兩種：一種是作為 Chrome 擴(kuò)展程序運(yùn)行；另一種作為命令行工具運(yùn)行。 Chrome 擴(kuò)展程序提供了一個對用戶更友好的界面，方便讀取報告。通過命令行工具可以將 Lighthouse 集成到持續(xù)集成系統(tǒng)。

通過 Lighthouse 我們可以對頁面從 PWA、性能、可訪問性、最佳實(shí)踐幾個方面進(jìn)行多維度的分析，并給出結(jié)果和建議，上文中提到的 FMP（First Meaningful Paint）、FI（First Interactive），CI（Consistently Interactive），PSI（Perceptual Speed Index）都可以從其中的性能報告中分析得到。

由于篇幅所限，對于 Lighthouse 的細(xì)節(jié)說明、原理及使用在此不再贅述，基本上在開發(fā)階段通過 Chrome Dev Tools、Lighthouse 完全可以進(jìn)行全面的性能體驗(yàn)和分析，已經(jīng)能夠?yàn)槲覀兊膬?yōu)化提供足夠多的指導(dǎo)建議。

僅僅在開發(fā)階段擁有可用的分析檢測工具還遠(yuǎn)遠(yuǎn)不夠，通常情況下，我們更希望在產(chǎn)品上線后，和競對的產(chǎn)品進(jìn)行感官性能的對標(biāo)分析，而這里往往會涉及到跨平臺（因?yàn)楦倢Φ漠a(chǎn)品實(shí)現(xiàn)可能是通過 HTML5 實(shí)現(xiàn)，也可能是諸如 Weex、React Native 的混合開發(fā)形式，當(dāng)然還有很大一部分可能是原生的實(shí)現(xiàn)）。

如何進(jìn)行跨平臺的感官性能對標(biāo)，在筆者看來非常重要，現(xiàn)在行業(yè)內(nèi)大家普遍采用的對標(biāo)方式是視頻對比，通過兩個視頻的時間軸對比來說明感官性能的提升。個人認(rèn)為這種方式無法做到量化和自動化，因此可能會出現(xiàn)不同的人對比得出的結(jié)果并不能夠?qū)R，同時效率較低。

我們需要做的僅僅是更進(jìn)一步，將視頻對比的過程量化和自動化。因此筆者在充分調(diào)研了現(xiàn)有社區(qū)的一些實(shí)現(xiàn)后，和同事封裝了一個簡單易用的小工具（Twilight）用于感官性能的跨平臺對標(biāo)。我們需要做的僅僅是錄制視頻，然后點(diǎn)選關(guān)鍵幀，之后便能夠自動的將 SI（Speed Index）、PSI（Perceptual Speed Index）、FVC（First Visual Change）、FCP（FirstContentful Paint）、FMP（First Meaningful Paint）、LVC（Last Visual Change）等指標(biāo)可視化的呈現(xiàn)出來。

在業(yè)務(wù)項(xiàng)目上我們也針對國際機(jī)票進(jìn)行了一系列的摸索和實(shí)踐。國際機(jī)票在客戶端內(nèi)以及純?yōu)g覽器中都可能被訪問，采用了 Vue 2.0 作為基礎(chǔ)框架，并通過純靜態(tài)化的方式開發(fā)并部署至 CDN。起初國際機(jī)票的頁面加載白屏明顯（首次內(nèi)容渲染時間長），用戶體驗(yàn)較差。因此我們通過上述提到的一些工具進(jìn)行了分析，發(fā)現(xiàn)網(wǎng)絡(luò)請求、應(yīng)用啟動、接口請求是影響列表頁性能加載的三大因素。

針對上述問題，我們采用了以下關(guān)鍵的優(yōu)化策略：

純前端離線化（在瀏覽器中通過純前端的手段進(jìn)行資源文件的離線化）； 客戶端離線化（在客戶端容器內(nèi)通過離線包的方式實(shí)現(xiàn)資源文件及頁面的離線化）； 頁面組件化并按需加載（通過組件化方式對頁面細(xì)粒度拆分并按需加載）； 預(yù)渲染提升感官性能（在框架啟動之前，通過預(yù)渲染的方式確保頁面框架最快呈現(xiàn)）。

通過上述優(yōu)化策略優(yōu)化后，效果顯著，純前端離線化上線后可交互和完全加載時間提升 50%，客戶端離線化上線后，首字節(jié)時間基本為 0（降低 500 毫秒），可交互和完全加載時間相較純前端離線化進(jìn)一步提升 30%至 50%，按需加載和預(yù)渲染上線后頁面的 FMP（First Meaningful Paint）提升 80%。

如圖 5 所示為列表頁在 Chrome 瀏覽器中模擬 4G 并將 CPU 模擬 4 倍降速（CPU Throttling 4x slowdown）的表現(xiàn)（不包含客戶端離線化的效果）。

總結(jié)一下，前端的性能分析和優(yōu)化方式，無論是傳統(tǒng)性能還是感官性能完全有跡可循。開發(fā)階段可以使用 Dev Tools、Lighthouse，借助非視覺指標(biāo)（Non-Visual Metrics）和視覺指標(biāo)（Visual Metrics）進(jìn)行分析，遵循傳統(tǒng)性能優(yōu)化軍規(guī)以及 Google PRPL Pattern 進(jìn)行性能優(yōu)化。通過我們提供的工具 Twilight 可以便捷的實(shí)現(xiàn)感官性能的跨平臺對標(biāo)分析。雖然我們在業(yè)務(wù)項(xiàng)目中的實(shí)踐取得了一定的效果，但優(yōu)化之路漫漫，還有很多空間的可能性。歡迎對性能優(yōu)化感興趣的同行一同交流，Do Better Web。

郭凱，美團(tuán)點(diǎn)評酒旅前端高級技術(shù)專家、高級技術(shù)經(jīng)理，目前負(fù)責(zé)美團(tuán)點(diǎn)評酒旅事業(yè)群境內(nèi)度假終端研發(fā)團(tuán)隊(duì)，致力于終端技術(shù)體系的完善和基礎(chǔ)設(shè)施的建設(shè)，培養(yǎng)人才精進(jìn)團(tuán)隊(duì)，服務(wù)業(yè)務(wù)創(chuàng)造科技價值，譯作有《編寫可維護(hù)的 JavaScript》、《第三方 JavaScript 編程》等。

總結(jié)

以上是生活随笔為你收集整理的前端感官性能的衡量和优化实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。