對于通過網站為用戶提供服務的企業來說，通過瀏覽器準確感知終端用戶的真實體驗至關重要。比如電商網站，如果不能先于用戶發現因商品價格無法加載，就會造成用戶放棄購買，使業務蒙受損失;視頻網站如果無法發現用戶瀏覽器不能正確加載視頻的問題，就無法阻止用戶投入競爭對手的懷抱，無論是在電腦上還是在手機端，諸如此類的問題其實比比皆是。

云智慧透視寶提供面向瀏覽器的真實用戶體驗監控(RUM)與管理解決方案，通過瀏覽器頁面端的用戶行為與體驗數據分析，幫助企業掌握頁面在不同區域、瀏覽器下的性能表現，提供頁面的JS、AJAX請求錯誤診斷及頁面元素瀑布圖，幫助前端開發人員深入定位每一個問題細節。

在解讀透視寶瀏覽器監控之前有必要先說明一個概念：真實用戶體驗監控(RUM)，因為瀏覽器監控最終目的就是去實現RUM：

一、真實用戶體驗監控(RUM)：

1、什么是RUM?

RUM是一種被動的監測技術，記錄一個網站或者客戶機與服務器或者云應用之間的所有用戶交互。

2、RUM的作用是什么?

監控一個網站或者應用的真實用戶交互，是運營部門確定用戶能否被快速和無錯誤服務的重要手段，如果沒有，說明其業務流程是缺失的。

RUM實現監控所有時間、所有地點的所有用戶使用應用程序的性能以及可用性情況，還會發現基礎設施和分類用戶操作，可以及時查看網絡會話和整個服務的健康狀況，以及移動端的用戶體驗。RUM可以追蹤跨層的網絡用戶體驗，捕獲實時會話，看到用戶在哪里點擊，測量響應時間，并看到出現問題的頁面等。而且，RUM可以輕松捕獲和重放用戶會話，然后創建反映真實用戶行為的測試腳本。

擴展知識：

被動監測：在頁面植入腳本或探針，當用戶訪問網頁時，探針自動采集數據并回傳數據庫進行分析。

主動監測： 搭建分布式監控環境，模擬用戶發起頁面訪問請求，主動采集性能數據并進行分析。

二、透視寶瀏覽器監控的作用

云智慧的透視寶作為一款應用性能管理產品，為什么要把瀏覽器監控作為最重要的功能之一呢?

在應用性能管理技術領域的“終端用戶體驗(EUE)”是監控實時應用程序的關鍵部分，同時也是我們端到端性能數據的重要組成部分，它所監控的數據對于分析用戶正在執行的應用程序事務，和他們正在經歷應用程序的響應狀況是非常有意義的，所以透視寶設計開發了瀏覽器監控的功能模塊。

透視寶瀏覽器性能監控是面向Web端真實用戶體驗的性能監控與管理，通過分析用戶行為、用戶分布、頁面性能、錯誤堆棧等數據，幫助開發深入定位問題，為其優化解決方案提供分析的數據依據，還能幫助運營深度分析用戶行為。

三、透視寶瀏覽器監控部署

1、首先通過透視寶官網免費注冊賬號:

2、注冊成功后，可登錄透視寶應用管理后臺，在配置界面下載安裝透視寶Smart Agent：

3、Smart Agent在發現應用之后會自動將一小段JS代碼注入到被監測的頁面，這段JS將引用透視寶線上RUM監控的JS文件，對當前終端用戶所訪問的WEB頁面進行分析處理，獲取頁面性能、瀏覽器基本信息、行為分析等數據，然后通過發送http請求的方式將數據回傳到透視寶的數據平臺接口。幾分鐘之后，就可以在【透視寶→瀏覽器】中查看應用列表和數據了。(當然有些客戶不希望在其應用中安裝Smart Agent，只想單純的使用透視寶的瀏覽器監控功能，對于這樣的需求，我們添加了手動引入JS的功能)

四、瀏覽器監控分類及實現

1、頁面性能監控：

通過使用HTML5提供的performance接口獲取頁面中各個階段的精確時間，去分析計算出企業所關心的網站性能指標，并按照地域、網頁、瀏覽器、運營商繪制成對應的響應時間分解圖和響應時間變化趨勢圖等。

分析計算出指標：終端用戶響應時間，首字節時間，服務器連接時間，響應可用時間，前端時間，文檔準備時間， 文檔下載時間，文檔處理時間，頁面渲染時間。

圖表實例：

按地域分布響應時間趨勢 (TOP5)

響應時間分解圖：

瀏覽器對比(TOP5)：

擴展知識：

HTML5的performance接口可獲取到各個頁面的精確時間，如下圖所示：

下面是對各個時間變量的解釋說明：

navigationStart：當前瀏覽器窗口的前一個網頁關閉，發生unload事件時的Unix毫秒時間戳。如果沒有前一個網頁，則等于fetchStart屬性。

unloadEventStart：如果前一個網頁與當前網頁屬于同一個域名，則返回前一個網頁的unload事件發生時的Unix毫秒時間戳。如果沒有前一個網頁，或者之前的網頁跳轉不是在同一個域名內，則返回值為0。

unloadEventEnd：如果前一個網頁與當前網頁屬于同一個域名，則返回前一個網頁unload事件的回調函數結束時的Unix毫秒時間戳。如果沒有前一個網頁，或者之前的網頁跳轉不是在同一個域名內，則返回值為0。

redirectStart：返回第一個HTTP跳轉開始時的Unix毫秒時間戳。如果沒有跳轉，或者不是同一個域名內部的跳轉，則返回值為0。

redirectEnd：返回最后一個HTTP跳轉結束時(即跳轉回應的最后一個字節接受完成時)的Unix毫秒時間戳。如果沒有跳轉，或者不是同一個域名內部的跳轉，則返回值為0。

fetchStart：返回瀏覽器準備使用HTTP請求讀取文檔時的Unix毫秒時間戳。該事件在網頁查詢本地緩存之前發生。

domainLookupStart：返回域名查詢開始時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。

domainLookupEnd：返回域名查詢結束時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。

connectStart：返回HTTP請求開始向服務器發送時的Unix毫秒時間戳。如果使用持久連接(persistent connection)，則返回值等同于fetchStart屬性的值。

connectEnd：返回瀏覽器與服務器之間的連接建立時的Unix毫秒時間戳。如果建立的是持久連接，則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認證過程全部結束。

secureConnectionStart：返回瀏覽器與服務器開始安全鏈接的握手時的Unix毫秒時間戳。如果當前網頁不要求安全連接，則返回0。

requestStart：返回瀏覽器向服務器發出HTTP請求時(或開始讀取本地緩存時)的Unix毫秒時間戳。

responseStart：返回瀏覽器從服務器收到(或從本地緩存讀取)第一個字節時的Unix毫秒時間戳。

responseEnd：返回瀏覽器從服務器收到(或從本地緩存讀取)最后一個字節時(如果在此之前HTTP連接已經關閉，則返回關閉時)的Unix毫秒時間戳。

domLoading：返回當前網頁DOM結構開始解析時(即Document.readyState屬性變為“loading”、相應的readystatechange事件觸發時)的Unix毫秒時間戳。

domLoading：返回當前網頁DOM結構開始解析時(即Document.readyState屬性變為“loading”、相應的readystatechange事件觸發時)的Unix毫秒時間戳。

domContentLoadedEventStart：返回當前網頁DOMContentLoaded事件發生時(即DOM結構解析完畢、所有腳本開始運行時)的Unix毫秒時間戳。

domContentLoadedEventEnd：返回當前網頁所有需要執行的腳本執行完成時的Unix毫秒時間戳。

domComplete：返回當前網頁DOM結構生成時(即Document.readyState屬性變為“complete”，以及相應的readystatechange事件發生時)的Unix毫秒時間戳。

loadEventStart：返回當前網頁load事件的回調函數開始時的Unix毫秒時間戳。如果該事件還沒有發生，返回0。

loadEventEnd：返回當前網頁load事件的回調函數運行結束時的Unix毫秒時間戳。如果該事件還沒有發生，返回0

2、JS錯誤信息：通過監聽瀏覽器error事件，在代碼層準確定位出錯頁面或腳本URL，引用頁面URL，抓取瀏覽器錯誤基本信息指標，并分別按照地域、網頁、瀏覽器、運營商繪制成對應的瀏覽器JS錯誤數(TOP5)以及瀏覽器JS錯誤率變化趨勢等圖表。

抓取指標：錯誤時間點，錯誤頁面地址，錯誤類型，錯誤信息，錯誤位置等。

圖表實例：

瀏覽器JS錯誤率變化趨勢(TOP4)：

3、客戶使用設備以及瀏覽器信息監測：通過瀏覽器的window.navigator接口獲取用戶的平臺信息，瀏覽器類型、版本、引擎，操作系統等信息，然后分析用戶在各大瀏覽器以及系統的訪問本頁面的比例。

圖表實例：

瀏覽器使用比例圖：

操作系統使用比例圖：

4、AJAX監控：

JavaScript調用ajax請求都是通過創建XMLHttpRequest對象來實現的(不包括ie7以下的版本)，我們對此對象以及里面的open，send，readystatechange等方法進行了重寫，用戶在進行ajax請求的時候可以通過重寫的方法做一些基本的過濾操作，進而達到既不影響用戶代碼又可以抓取ajax請求信息的目的。

在ajax監控中抓取了ajax請求URL，請求類型，請求數據大小，響應時間，響應數據大小，響應首字節時間，響應最后一個字節時間，響應狀態，callback執行時間，請求超時時間等指標。

圖表實例：

ajax響應時間圖：

ajax錯誤類型圖：

5、用戶行為監測：通過監聽用戶的所有操作行為及其對應請求信息，比如：一個登錄頁面，可以記錄下用戶點擊“登錄”按鈕對應發送ajax請求以及響應等信息，進而實現端到端的行為分析。

除了以上列舉的幾個功能，透視寶瀏覽器監控還有更多的功能，比如總訪問用戶，總頁面數，總訪問次數以及在各個分類下的吞吐率變化趨勢等，如果您想了解網站和前端應用的RUM，那就來試試吧：http://cloudwise.mikecrm.com/f.php?t=K49gbV