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安裝
<code>npminstall
performance
-kits /<code>
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最高訪問排行，跳出率最高排行
- 統計實時和每天的全國省份流量熱力圖
- 統計每個用戶每次訪問的行為軌跡
