建站
咨詢
售后
建站咨詢
新聞中心
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)行。
我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、花山ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的花山網(wǎng)站制作公司
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í)間以及前端異常捕獲等。
市場(chǎng)上有很多收費(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)境、場(chǎng)景配合頁面設(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用于檢測(cè)頁面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)測(cè)
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è)用戶每次訪問的行為軌跡
分享文章：前端性能監(jiān)控及推薦幾個(gè)開源的監(jiān)控系統(tǒng)
分享網(wǎng)址：http://www.5511xx.com/article/djeheps.html
