New Relic性能監控（三）瀏覽器端監控

New Relic性能監控（三）瀏覽器端監控

2018-05-02 琅琊書生

本系列文章基於公司使用New Relic的經驗，鑑於國內較少有這方面的文章，所以把我工做中瞭解到的知識分享給你們，但願能夠給須要的朋友帶來幫助。

New Relic Browser簡介

New Relic Browser是一款前端性能監控工具。這一領域的監控又常常被稱爲‘真實用戶監控’（Real User Monitoring, RUM).它主要用來檢查前端頁面的加載時間，以衡量真實用戶的使用體驗。可是，browser能作到的遠不止如此，它還能提供如下監控數據：

• 獨立的會話性能
• AJAX請求
• Javascript錯誤

另外，若是針對同一web程序同時使用了Browser和APM，New Relic可以將二者的數據關聯起來，使得針對每一次的用戶請求，咱們可以得到端到端的詳細數據包括：

• 前端消耗的時間，包括頁面加載／解析／渲染的詳細時間。
• 服務端耗費的時間，包括網絡通信時間和後臺服務器處理請求的時間。若是後臺使用了數據庫，New Relic在APM端還能夠分析出花費在數據庫操做的時間。
• 用戶的地理位置信息。
• 瀏覽器的類型和版本，以及用戶的操做系統類型。

安裝方式

New Relic Browser經過一小段Javascript代碼（或者也能夠稱之爲‘agent’）來收集頁面在瀏覽器端的各類性能數據，達到監控的目的。其有如下幾種安裝方式：

• 使用APM自動注入。若是你的應用使用了New Relic APM監控，那麼你使用APM agent將會自動的注入這段javascript代碼段到你的前端頁面。這是最簡單的一種安裝方式。注意，若是你的網站有經過CDN的靜態內容，不會經由服務端進程，那麼這種方式就失效了。
• 手動將代碼片斷植入到你的頁面。這種方式更爲靈活，能給你更多控制力。好比上面提到的來自CDN的靜態頁面。

性能概覽

下圖爲一個Browser監控的App的性能概覽頁面:

該頁面主要包含下面幾個部分的內容：

• 頁面加載時間曲線
• Apdex得分圖
• 各瀏覽器的吞吐量
• 會話追蹤，JS錯誤，以及Ajax響應時間。這部分功能僅針對專業版用戶開放。

頁面加載時間曲線

該曲線使用不一樣的顏色區分了一個用戶請求消耗在不一樣部分的時間：

• 最下面爲後端服務器處理時間（紫色部分）。這部分時間是消耗在服務端程序的時間，是由APM統計得來。
• 在其上棕色部分爲網絡時間。該部分時間爲用戶請求在網絡上的傳輸時間。注意，若是不是使用APM自動注入的Browser javascript，那麼這部分時間將包含服務端程序處理時間。
• 請求等待處理的時間。
• DOM解析時間（黃色部分）。瀏覽器得到頁面數據，解析成DOM樹的時間。
• 頁面渲染時間（藍色部分）。瀏覽器從DOM樹繪製出用戶看到的頁面所消耗的時間。

Apdex曲線

Apdex曲線是網站性能得分的曲線。對於有APM監控的程序，該圖同時也會顯示出服務端進程的Apdex得分。

吞吐量

吞吐量是按瀏覽器的類型繪製的，單位是每分鐘瀏覽量（ppm, pages per minute)。

頁面加載時間線

經過與APM集成，New Relic的頁面加載時間分析能夠記錄一個請求在處理過程當中的各個階段所花費的時間。下面是一個典型的頁面加載時間線：

其主要的階段以下：

1. 頁面加載時間從用戶發起一個請求開始，包括用戶在瀏覽器地址欄輸入地址開始訪問，用戶在頁面上點擊一個連接，或者提交一個表單。
2. 用戶的請求跨越網絡，抵達服務器，開始被服務端進程處理。
3. 服務端進程完成對請求的處理，併發送一個HTML響應。該響應一樣要跨越網絡，回到瀏覽器端。
4. 瀏覽器收到HTML響應，開始解析以構建DOM樹。
5. DOM樹構建完成，瀏覽器將發送DOM就緒事件，而且根據此樹開始進行頁面渲染。
6. 頁面渲染完成，瀏覽器發出window load事件。

由此，咱們能夠把時間分紅幾個部分：

• 前端時間 = DOM解析時間 + 頁面渲染時間
• 網絡傳輸時間 = 請求抵達服務器時間 + 響應返回瀏覽器時間
• 服務端處理請求的時間

頁面訪問統計

頁面訪問統計是用來彙總網站的頁面訪問量。New Relic用URL來區分不一樣的頁面。

在這個頁面上，能夠選擇三種不一樣的排序方式：總的頁面加載時間，平均頁面加載時間，吞吐量。

對於每一個請求，右側的圖表詳細的列出了每一個階段花費的時間，和一段時間內的吞吐量。
還能夠查看歷史性能數據。對於APM監控的服務端進程，還能夠同時給出該請求對應的後端事務的性能數據。

基於瀏覽器類型的統計

New Relic還能夠統計用戶的瀏覽器類型，幫助你瞭解不一樣瀏覽器在你的用戶中的實際使用狀況。

針對某一感興趣的瀏覽器類型，New Relic還能夠給出詳細的基於版本的統計：

基於地理信息的統計

基於用戶的地理信息的訪問統計也是New Relic的一個特點。它可以詳細的給出不一樣位置的用戶對網站的訪問體驗，幫助咱們發現有問題的區域，以便能詳細的研究緣由，使得咱們可以有針對性的進行優化。