我們為什麼需要關注站點的效能，效能為什麼如此重要呢？如今任何網際網路產品首先重要的都是流量，流量最終會轉換為商業價值。所以在網際網路產品中，流量、轉化率和留存率基本上是產品經理或者業務非常關注的幾個因素，而效能則會直接影響到使用者的轉化和留存（在一定階段之後影響較大，產品初期功能的因素佔比更大）。所以換言之效能，其實是錢，我們關注和監測效能並非是為了資料而資料。產品的使用體驗我認為包含三大要素：產品功能、互動視覺、前端效能，而我們做效能優化的最終目的是提升前端效能，從而提升產品體驗。

傳統效能優化

值得慶幸的是，前端的效能優化有諸多有跡可循的理論和方法，比如 Yahoo！效能軍規（Best Practices for Speeding Up Your Web Site）、Google PageSpeed Insights Rules（developers.google.com/speed/docs/… Browser Processing Model 的不同階段。

圖 1 瀏覽器的載入和處理過程

根據圖 1 的 Processing Model，我們可以統計得到以下效能指標：

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

這些指標對於前端而言都司空見慣，基本上核心關注的無外乎是：首位元組時間（用於衡量網路鏈路和伺服器響應效能）、白屏時間（firstPaint）、可互動時間（interactive）、完全載入時間（load）。我們在很長一段時間裡都是根據這些指標來量化分析我們的站點效能，似乎不曾認真想過這些指標是否能夠真正的反映使用者的感官效能。

顯然，這些指標絕大部分都屬於非視覺指標（Non-Visual Metrics），是體驗優化的常規指標，更是體驗和效能優化中逃不開的關鍵因素，但卻並非感官指標，也並不能完全衡量出使用者的感官效能（Perceptual Performance）。

感官效能優化

所謂感官效能，即使用者直觀感知到的效能，使用者感受是一種非常主觀的判斷，那麼如何衡量和統計感知效能？通常我們針對使用者感知會通過用研分析的方式（眼動儀、使用者溝通、使用者反饋、調研問卷、專家評估）來評估和衡量。但感官效能不同於使用者感受，是否有方式可以量化和衡量呢？筆者經過一些調研和了解後，發現感官效能是可以通過一定方式進行衡量、分析和對標的，因為對效能的感受更多反映在視覺的變化上，因此我們可以通過一些視覺指標來衡量感官效能：

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 代表文件中內容元素（文字、影象、Canvas，或者 SVG）首次渲染的時間。它通常情況下是無意義的渲染，比如頭部和導航條。First Meaningful Paint Time 代表首次有意義的渲染時間（它的統計在重大的佈局變化之後，往往代表了使用者所關心的首次渲染時間），First Interactive Time、Consistently Interactive Time 分別表示首次可互動時間和持續可互動時間。

如圖 2 的流程圖展示了 Blink 核心中 Time-to-first-X-paint 的分析原理和上報路徑（其他 first-X-paint 的指標類似）。

圖 2 Blink 核心中 Time-to-first-X-paint 的分析原理和上報路徑

Fisrt Visual Change、Last Visual Change 分別表示首次和最後一次視覺發生變化的時間點，Speed Index、Perceptual Speed Index 均為視覺速度，兩者的區別在於背後所用到的演算法不同，前者採用了 Mean Pixel-Histogram Difference 演算法，後者則採用了 Structural Similarity Image Metric 演算法，其中 Perceptual Speed Index 的統計結果更貼近使用者的真實感受。Speed Index 的演算法如下，它代表了我們頁面在載入過程中視覺上的變化速度，其值越小代表感官效能越好：

公式 1

通過 FCP（First Contentful Paint）、FMP（First Meaningful Paint）、PSI（Perceptual Speed Index），我們可以實現跨平臺的感官效能分析和對標（比如可以實現 HTML5 和 Hybrid 對比，HTML5 和原生應用的對比等），如圖 3 所示為我們專案中某列表頁的 SI 和 PSI 柱狀圖。

圖 3 業務專案中某列表頁的 SI 和 PSI 柱狀圖示意

效能優化分析工具

提及效能優化分析工具，在開發階段我們擁有眾多的選擇（比如 Chrome 自帶的 Dev Tools、老牌的 YSlow、以及 Google 推出的 PageSpeed Insights），這裡筆者強烈推薦的是 Lighthouse。Lighthouse 是一個開源的自動化工具，執行 Lighthouse 的方式有兩種：一種是作為 Chrome 擴充套件程式執行；另一種作為命令列工具執行。 Chrome 擴充套件程式提供了一個對使用者更友好的介面，方便讀取報告。通過命令列工具可以將 Lighthouse 整合到持續整合系統。

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

由於篇幅所限，對於 Lighthouse 的細節說明、原理及使用在此不再贅述，基本上在開發階段通過 Chrome Dev Tools、Lighthouse 完全可以進行全面的效能體驗和分析，已經能夠為我們的優化提供足夠多的指導建議。

感官效能的跨平臺對標

僅僅在開發階段擁有可用的分析檢測工具還遠遠不夠，通常情況下，我們更希望在產品上線後，和競對的產品進行感官效能的對標分析，而這裡往往會涉及到跨平臺（因為競對的產品實現可能是通過 HTML5 實現，也可能是諸如 Weex、React Native 的混合開發形式，當然還有很大一部分可能是原生的實現）。

如何進行跨平臺的感官效能對標，在筆者看來非常重要，現在行業內大家普遍採用的對標方式是視訊對比，通過兩個視訊的時間軸對比來說明感官效能的提升。個人認為這種方式無法做到量化和自動化，因此可能會出現不同的人對比得出的結果並不能夠對齊，同時效率較低。

我們需要做的僅僅是更進一步，將視訊對比的過程量化和自動化。因此筆者在充分調研了現有社群的一些實現後，和同事封裝了一個簡單易用的小工具（Twilight）用於感官效能的跨平臺對標。我們需要做的僅僅是錄製視訊，然後點選關鍵幀，之後便能夠自動的將 SI（Speed Index）、PSI（Perceptual Speed Index）、FVC（First Visual Change）、FCP（FirstContentful Paint）、FMP（First Meaningful Paint）、LVC（Last Visual Change）等指標視覺化的呈現出來。

圖 4 使用 Twilight 分析工具獲取感官效能指標的流程

業務應用優化實踐

在業務專案上我們也針對國際機票進行了一系列的摸索和實踐。國際機票在客戶端內以及純瀏覽器中都可能被訪問，採用了 Vue 2.0 作為基礎框架，並通過純靜態化的方式開發並部署至 CDN。起初國際機票的頁面載入白屏明顯（首次內容渲染時間長），使用者體驗較差。因此我們通過上述提到的一些工具進行了分析，發現網路請求、應用啟動、介面請求是影響列表頁效能載入的三大因素。

針對上述問題，我們採用了以下關鍵的優化策略：

純前端離線化（在瀏覽器中通過純前端的手段進行資原始檔的離線化）；
客戶端離線化（在客戶端容器內通過離線包的方式實現資原始檔及頁面的離線化）；
頁面元件化並按需載入（通過元件化方式對頁面細粒度拆分並按需載入）；
預渲染提升感官效能（在框架啟動之前，通過預渲染的方式確保頁面框架最快呈現）。

通過上述優化策略優化後，效果顯著，純前端離線化上線後可互動和完全載入時間提升 50%，客戶端離線化上線後，首位元組時間基本為 0（降低 500 毫秒），可互動和完全載入時間相較純前端離線化進一步提升 30%至 50%，按需載入和預渲染上線後頁面的 FMP（First Meaningful Paint）提升 80%。

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

圖 5 國際機票專案效能優化前後的載入效果對比

效能分析及優化小結

總結一下，前端的效能分析和優化方式，無論是傳統效能還是感官效能完全有跡可循。開發階段可以使用 Dev Tools、Lighthouse，藉助非視覺指標（Non-Visual Metrics）和視覺指標（Visual Metrics）進行分析，遵循傳統效能優化軍規以及 Google PRPL Pattern 進行效能優化。通過我們提供的工具 Twilight 可以便捷的實現感官效能的跨平臺對標分析。雖然我們在業務專案中的實踐取得了一定的效果，但優化之路漫漫，還有很多空間的可能性。歡迎對效能優化感興趣的同行一同交流，Do Better Web。

作者簡介

郭凱，美團點評酒旅前端高階技術專家、高階技術經理，目前負責美團點評酒旅事業群境內度假終端研發團隊，致力於終端技術體系的完善和基礎設施的建設，培養人才精進團隊，服務業務創造科技價值，譯作有《編寫可維護的 JavaScript》、《第三方 JavaScript 程式設計》等。

• 本文轉自美團點評技術學院，未經作者許可，不允許私自轉載！
• 加入美團雲技術交流群（QQ群：469243579），每日分享更多精彩技術文章。