日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端性能監(jiān)控及推薦幾個開源的監(jiān)控系統(tǒng)

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

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、花山ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的花山網(wǎng)站制作公司

1. 監(jiān)控指標

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

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

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

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

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

1. performanceKit

1.1 功能定義

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

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

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

1.2 npm安裝

 
 
 
    
  
  
  
  1. npm install performance-kits --save 
    2.

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

需要支持promise

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

import performancekit from 'performance-kits';

const { onloadPerformance, switchPerformance, closePerformance } = performancekit;

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

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

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

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

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

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

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

1.4 github地址

https://github.com/IndifferenceDoll/performanceKit

2. Webfunny

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

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

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

2.1 項目總覽

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

2.2 錯誤分析

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

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

2.3 用戶細查

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

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

2.4 性能分析

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

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

3. zanePerfor

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

3.1 瀏覽器端(WEB)

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

3.2 微信小程序端

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

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

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

網(wǎng)站題目：前端性能監(jiān)控及推薦幾個開源的監(jiān)控系統(tǒng)
當(dāng)前地址：http://www.dlmjj.cn/article/djeheps.html