web項(xiàng)目性能很重要，開發(fā)迭代過程中難免會(huì)有所忽視，性能會(huì)伴隨產(chǎn)品的迭代而有所衰減。特別在移動(dòng)端，網(wǎng)絡(luò)一直是一個(gè)很大的瓶頸，而頁面卻越來越大，功能越來越復(fù)雜。并沒有簡單的幾條黃金規(guī)則就可以搞定性能優(yōu)化工作，我們需要一套性能監(jiān)控系統(tǒng)持續(xù)監(jiān)控、評(píng)估、預(yù)警頁面性能狀況、發(fā)現(xiàn)瓶頸，指導(dǎo)優(yōu)化工作的進(jìn)行。

1. 監(jiān)控指標(biāo)

前端性能指標(biāo)主要有一下幾種：

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

除此之外還需要關(guān)注接口的成功調(diào)用率、接口響應(yīng)時(shí)間、資源加載時(shí)間以及前端異常捕獲等。

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

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

1. performanceKit

1.1 功能定義

前端基礎(chǔ)性能監(jiān)控

通用的性能監(jiān)控只能是較簡單的基礎(chǔ)監(jiān)控，很多更深入復(fù)雜的性能監(jiān)控，需要針對(duì)特定的環(huán)境、場景配合頁面設(shè)計(jì)、曝光等條件去定制化設(shè)計(jì)api，并在合適的地方調(diào)用。

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

1.2 npm安裝

npm install performance-kits --save

1.3 需要在瀏覽器環(huán)境下

需要支持promise

需要支持performance，且支持performance timeline level2 規(guī)范

import performancekit from 'performance-kits';

const { onloadPerformance, switchPerformance, closePerformance } = performancekit;

其中，onloadPerformance用于檢測頁面onload后各項(xiàng)時(shí)間指標(biāo)，所以要在項(xiàng)目入口文件就引入，不用擔(dān)心會(huì)覆蓋項(xiàng)目原有onload的回調(diào)，已做過兼容

switchPerformance用于路由切換時(shí)使用，需要開發(fā)者在監(jiān)聽路由變化的回調(diào)中使用。

closePerformance用于離開組件/關(guān)閉項(xiàng)目時(shí)使用，需要開發(fā)者在監(jiān)聽離開或關(guān)閉的回調(diào)中使用，需友情提示，如果是在關(guān)閉項(xiàng)目的回調(diào)中使用，那么通過接口上報(bào)數(shù)據(jù)的時(shí)候，通信方式請(qǐng)選擇sendBeacon。

三個(gè)函數(shù)均只接受兩個(gè)參數(shù)：

參數(shù)一：定時(shí)器間隔時(shí)間

參數(shù)二：總輪詢時(shí)間

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

1.4 github地址

https://github.com/IndifferenceDoll/performanceKit

2. Webfunny

只需要簡單幾步就可以搭建一套屬于自己的前端監(jiān)控系統(tǒng)，實(shí)時(shí)了解線上應(yīng)用的健康情況！

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

前端開發(fā)，后端接口，運(yùn)營數(shù)據(jù)，產(chǎn)品分析

2.1 項(xiàng)目總覽

監(jiān)控系統(tǒng)支持多個(gè)項(xiàng)目，讓所有項(xiàng)目的狀態(tài)都一目了然。 通過對(duì)線上項(xiàng)目的實(shí)時(shí)分析，讓我們可以對(duì)線上狀況有個(gè)非常直觀的了解。例如PV、UV數(shù)據(jù)變化趨勢(shì)，線上報(bào)錯(cuò)、異常等

2.2 錯(cuò)誤分析

精細(xì)化分析每一個(gè)報(bào)錯(cuò)問題，支持sourceMap源碼定位。

通過探針監(jiān)控和上報(bào)線上環(huán)境的報(bào)錯(cuò)，以及一些自定義異常。我們對(duì)這些日志進(jìn)行精確的分析，可以準(zhǔn)確定位到代碼的問題所在。同時(shí)能夠看到每一個(gè)報(bào)錯(cuò)的變化趨勢(shì)，也能夠分析出用戶在哪一步操作中發(fā)生了問題。

2.3 用戶細(xì)查

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

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

2.4 性能分析

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

探針對(duì)頁面的加載性能進(jìn)行分析，直觀反映在報(bào)表之上。也對(duì)接口的性能進(jìn)行了分析，如：耗時(shí)、成功率等。

3. zanePerfor

zanePerfor目前實(shí)現(xiàn)了哪些功能？

3.1 瀏覽器端(WEB)

• 頁面級(jí)的性能上報(bào)（多頁面 || 單頁面應(yīng)用程序通用）
• 頁面AJAX性能上報(bào)
• 頁面所有加載資源性能上報(bào)（圖片,js,css）
• 頁面所有錯(cuò)誤信息上報(bào)（js,css,ajax）

3.2 微信小程序端

• path路徑對(duì)應(yīng)的AJAX性能上報(bào)
• 小程序錯(cuò)誤信息上報(bào)（js,ajax,img）
• 用戶設(shè)備信息及其網(wǎng)絡(luò)信息上報(bào)

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

• 統(tǒng)計(jì)每分鐘應(yīng)用的PV,UV,IP信息，統(tǒng)計(jì)每天的PV,UV,IP,跳出率，用戶訪問平均深度
• 統(tǒng)計(jì)實(shí)時(shí)和每天的應(yīng)用top最高訪問排行，跳出率最高排行
• 統(tǒng)計(jì)實(shí)時(shí)和每天的全國省份流量熱力圖
• 統(tǒng)計(jì)每個(gè)用戶每次訪問的行為軌跡