[[339286]]

web項目性能很重要，開發迭代過程中難免會有所忽視，性能會伴隨產品的迭代而有所衰減。特別在移動端，網絡一直是一個很大的瓶頸，而頁面卻越來越大，功能越來越復雜。并沒有簡單的幾條黃金規則就可以搞定性能優化工作，我們需要一套性能監控系統持續監控、評估、預警頁面性能狀況、發現瓶頸，指導優化工作的進行。

1. 監控指標

前端性能指標主要有一下幾種：

• 頁面加載耗時：Page Load Time
• 首屏加載耗時：Above-the-Fold Time
• 重定向耗時：redirectEnd - redirectStart
• DNS查詢耗時 ：domainLookupEnd - domainLookupStart
• TCP鏈接耗時 ：connectEnd - connectStart
• HTTP請求耗時 ：responseEnd - responseStart
• 解析dom樹耗時 ： domComplete - domInteractive
• 白屏時間 ：responseStart - navigationStart
• DOM ready耗時 ：domContentLoadedEventEnd - navigationStart
• onload時間：loadEventEnd - navigationStart，也即是onload回調函數執行的時間。

除此之外還需要關注接口的成功調用率、接口響應時間、資源加載時間以及前端異常捕獲等。

市場上有很多收費的監控系統，像阿里的ARMS等等，我們這里就不討論了。如果我們從零開發一個完整的前端監控系統的話，還是需要一定的時間的，加上可能人手不足，大部分忙著業務的開發，所以大部分中小公司都選擇一些第三方的付費監控系統。

我們有沒有可能快速搭建一個上線可用的前端性能系統呢，答案是可以的，就是采用一些開源的前端性能監控系統，加上二次開發。這里我推薦幾個給大家。

1. performanceKit

1.1 功能定義

前端基礎性能監控

通用的性能監控只能是較簡單的基礎監控，很多更深入復雜的性能監控，需要針對特定的環境、場景配合頁面設計、曝光等條件去定制化設計api，并在合適的地方調用。

例如采集Speed Index、Perceptual Speed Index、視覺完整時間(Visually Complete)、首次有效渲染時長(First Meaningful Paint)等指標。

1.2 npm安裝

npm install performance-kits --save 

1.3 需要在瀏覽器環境下

需要支持promise

需要支持performance，且支持performance timeline level2 規范

import performancekit from 'performance-kits';

const { onloadPerformance, switchPerformance, closePerformance } = performancekit;

其中，onloadPerformance用于檢測頁面onload后各項時間指標，所以要在項目入口文件就引入，不用擔心會覆蓋項目原有onload的回調，已做過兼容

switchPerformance用于路由切換時使用，需要開發者在監聽路由變化的回調中使用。

closePerformance用于離開組件/關閉項目時使用，需要開發者在監聽離開或關閉的回調中使用，需友情提示，如果是在關閉項目的回調中使用，那么通過接口上報數據的時候，通信方式請選擇sendBeacon。

三個函數均只接受兩個參數：

參數一：定時器間隔時間

參數二：總輪詢時間

該輪詢目的為找到paint類型的entry(需要瀏覽器兼容支持)，進而進行關于渲染的性能監測

1.4 github地址

https://github.com/IndifferenceDoll/performanceKit

2. Webfunny

只需要簡單幾步就可以搭建一套屬于自己的前端監控系統，實時了解線上應用的健康情況！

隨時隨地連接線上用戶，無論何時何地，解決前端問題都易如反掌！

前端開發，后端接口，運營數據，產品分析

2.1 項目總覽

監控系統支持多個項目，讓所有項目的狀態都一目了然。 通過對線上項目的實時分析，讓我們可以對線上狀況有個非常直觀的了解。例如PV、UV數據變化趨勢，線上報錯、異常等

2.2 錯誤分析

精細化分析每一個報錯問題，支持sourceMap源碼定位。

通過探針監控和上報線上環境的報錯，以及一些自定義異常。我們對這些日志進行精確的分析，可以準確定位到代碼的問題所在。同時能夠看到每一個報錯的變化趨勢，也能夠分析出用戶在哪一步操作中發生了問題。

2.3 用戶細查

深入分析每一個用戶，記錄下每個用戶的所有行為。

由于線上用戶的操作行為十分復雜，有些問題可能隱藏在很多次操作之后，所以探針記錄了用戶的很多操作行為，一旦出現問題，復現BUG也將變得非常簡單。 同時，可以使用多種檢索條件進行搜索，提高查找效率。

2.4 性能分析

分析頁面和接口性能，加載耗時，成功率。

探針對頁面的加載性能進行分析，直觀反映在報表之上。也對接口的性能進行了分析，如：耗時、成功率等。

3. zanePerfor

zanePerfor目前實現了哪些功能？

3.1 瀏覽器端(WEB)

• 頁面級的性能上報（多頁面 || 單頁面應用程序通用）
• 頁面AJAX性能上報
• 頁面所有加載資源性能上報（圖片,js,css）
• 頁面所有錯誤信息上報（js,css,ajax）

3.2 微信小程序端

• path路徑對應的AJAX性能上報
• 小程序錯誤信息上報（js,ajax,img）
• 用戶設備信息及其網絡信息上報

3.3 后端界面展示功能（web,小程序通用）

• 統計每分鐘應用的PV,UV,IP信息，統計每天的PV,UV,IP,跳出率，用戶訪問平均深度
• 統計實時和每天的應用top最高訪問排行，跳出率最高排行
• 統計實時和每天的全國省份流量熱力圖
• 統計每個用戶每次訪問的行為軌跡