偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

前端性能監(jiān)控及推薦幾個開源的監(jiān)控系統(tǒng)

新聞 前端
web項目性能很重要,開發(fā)迭代過程中難免會有所忽視,性能會伴隨產品的迭代而有所衰減。

 [[339286]]

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

1. 監(jiān)控指標

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

  • 頁面加載耗時: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回調函數(shù)執(zhí)行的時間。

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

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

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

1. performanceKit

1.1 功能定義

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

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

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

1.2 npm安裝

  1. 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后各項時間指標,所以要在項目入口文件就引入,不用擔心會覆蓋項目原有onload的回調,已做過兼容

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

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

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

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

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

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

1.4 github地址

https://github.com/IndifferenceDoll/performanceKit

2. Webfunny

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

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

前端開發(fā),后端接口,運營數(shù)據,產品分析

2.1 項目總覽

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

2.2 錯誤分析

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

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

2.3 用戶細查

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

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

2.4 性能分析

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

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

3. zanePerfor

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

3.1 瀏覽器端(WEB)

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

3.2 微信小程序端

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

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

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

 

 

責任編輯:張燕妮 來源: 今日頭條
相關推薦

2011-07-05 14:59:17

java

2023-03-01 09:07:44

前端監(jiān)控異常

2019-04-08 16:50:33

前端性能監(jiān)控

2020-12-10 10:00:59

監(jiān)控Java可視化

2009-03-31 16:41:38

網絡性能網絡監(jiān)控開源

2009-06-22 08:38:33

Windows 7微軟操作系統(tǒng)

2021-05-31 08:30:50

監(jiān)控網站性能

2012-02-20 23:02:15

Linux

2011-11-15 11:14:56

監(jiān)控工具Ubuntu

2024-06-19 08:24:47

2017-08-11 19:13:01

LinuxNmon系統(tǒng)監(jiān)控工具

2020-07-22 08:27:26

函數(shù)監(jiān)控前端

2016-09-29 15:51:27

LinuxNtop性能

2010-10-13 09:45:50

Linux監(jiān)控腳本

2025-01-09 06:00:00

Checkmate監(jiān)控系統(tǒng)開源

2011-03-31 16:24:16

cacti監(jiān)控

2012-09-17 11:12:24

網絡監(jiān)控工具網絡監(jiān)控

2012-11-05 13:59:12

WebFdSafeJS

2022-05-22 21:23:10

前端監(jiān)控系統(tǒng)

2019-06-18 10:24:23

開源技術 趨勢
點贊
收藏

51CTO技術棧公眾號