前端監控(用戶行爲追蹤、資源加載詳情)

​所謂web,即便你我素未謀面,便知志趣相投;足不出戶,亦知世界之大。javascript

很久不見,可曾想念?前端監控系統增長了用戶行爲追蹤和資源加載詳情,那什麼是用戶行爲追蹤呢?什麼又是資源加載詳情?有了這些咱們能作什麼呢?咱們下面就來聊一聊。css

用戶行爲追蹤

咱們收集了用戶的pv,一堆又一堆的數據擺在咱們面前,咱們怎樣才能發揮這些數據的做用呢?這下好了,咱們知道用戶訪問頁面時間,離開頁面時間,進而能夠計算出頁面停留時間,咱們若是將單個用戶的訪問記錄串聯起來,就會產生一條較完整的訪問路徑,有了這條路徑,這樣咱們就能夠清楚地看到用戶對哪些功能頁面感興趣,是否是豁然開朗^_^。那就來看看咱們的監控平臺:前端

圖片描述

關鍵路徑記錄:java

圖片描述

大家以爲怎麼樣呢?趕忙去看看吧!git

資源加載詳情

當用戶進入站點時,瀏覽器將會加載一系列資源,好比xmlhttp、javascript、css和img等等。做爲開發人員,有時,咱們須要去關注這些資源的加載狀況(大小,耗時等),找出耗時較長的資源來作一些優化,幫助提高網頁響應速度。那怎樣才能獲取到這些數據呢?咱們又要回到咱們的神器performance,它提供了不少方法:github

圖片描述

這裏咱們要用到的即是getEntries()這個方法,它會拿到頁面加載的全部資源狀況。
圖片描述web

重點來了,咱們來看看咱們的監控平臺如何開啓這個功能:
首先咱們到應用設置頁面,勾選上報資源加載狀況,而後複製探針到你的網站。瀏覽器

圖片描述

一切大功告成,如今去系統的資源加載詳情,就能看到資源加載狀況了,是否是很簡單呢,^_^。優化

圖片描述

喜歡請點個讚唄網站

或者去https://github.com/kisslove/w...

或者打賞一下

再或者……

哈哈,想法有點多了。