資訊專欄INFORMATION COLUMN
摘要：性能概覽下圖為一個(gè)監(jiān)控的的性能概覽頁面該頁面主要包含下面幾個(gè)部分的內(nèi)容頁面加載時(shí)間曲線得分圖各瀏覽器的吞吐量會(huì)話追蹤，錯(cuò)誤，以及響應(yīng)時(shí)間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。
New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控
2018-05-02 瑯琊書生New Relic Browser簡介本系列文章基于公司使用New Relic的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識(shí)分享給大家，希望可以給需要的朋友帶來幫助。
New Relic Browser是一款前端性能監(jiān)控工具。這一領(lǐng)域的監(jiān)控又經(jīng)常被稱為‘真實(shí)用戶監(jiān)控’（Real User Monitoring, RUM).它主要用來檢查前端頁面的加載時(shí)間，以衡量真實(shí)用戶的使用體驗(yàn)。但是，browser能做到的遠(yuǎn)不止如此，它還能提供以下監(jiān)控?cái)?shù)據(jù)：
獨(dú)立的會(huì)話性能
AJAX請求
Javascript錯(cuò)誤
另外，如果針對同一web程序同時(shí)使用了Browser和APM，New Relic能夠?qū)烧叩臄?shù)據(jù)關(guān)聯(lián)起來，使得針對每一次的用戶請求，我們能夠獲得端到端的詳細(xì)數(shù)據(jù)包括：
前端消耗的時(shí)間，包括頁面加載／解析／渲染的詳細(xì)時(shí)間。
服務(wù)端耗費(fèi)的時(shí)間，包括網(wǎng)絡(luò)通訊時(shí)間和后臺(tái)服務(wù)器處理請求的時(shí)間。如果后臺(tái)使用了數(shù)據(jù)庫，New Relic在APM端還可以分析出花費(fèi)在數(shù)據(jù)庫操作的時(shí)間。
用戶的地理位置信息。
瀏覽器的類型和版本，以及用戶的操作系統(tǒng)類型。
安裝方式New Relic Browser通過一小段Javascript代碼（或者也可以稱之為‘a(chǎn)gent’）來收集頁面在瀏覽器端的各種性能數(shù)據(jù)，達(dá)到監(jiān)控的目的。其有以下幾種安裝方式：
使用APM自動(dòng)注入。如果你的應(yīng)用使用了New Relic APM監(jiān)控，那么你使用APM agent將會(huì)自動(dòng)的注入這段javascript代碼段到你的前端頁面。這是最簡單的一種安裝方式。注意，如果你的網(wǎng)站有通過CDN的靜態(tài)內(nèi)容，不會(huì)經(jīng)由服務(wù)端進(jìn)程，那么這種方式就失效了。
手動(dòng)將代碼片段植入到你的頁面。這種方式更為靈活，能給你更多控制力。比如上面提到的來自CDN的靜態(tài)頁面。
性能概覽下圖為一個(gè)Browser監(jiān)控的App的性能概覽頁面:
該頁面主要包含下面幾個(gè)部分的內(nèi)容：
頁面加載時(shí)間曲線
Apdex得分圖
各瀏覽器的吞吐量
會(huì)話追蹤，JS錯(cuò)誤，以及Ajax響應(yīng)時(shí)間。這部分功能僅針對專業(yè)版用戶開放。
頁面加載時(shí)間曲線該曲線使用不同的顏色區(qū)分了一個(gè)用戶請求消耗在不同部分的時(shí)間：
最下面為后端服務(wù)器處理時(shí)間（紫色部分）。這部分時(shí)間是消耗在服務(wù)端程序的時(shí)間，是由APM統(tǒng)計(jì)得來。
在其上棕色部分為網(wǎng)絡(luò)時(shí)間。該部分時(shí)間為用戶請求在網(wǎng)絡(luò)上的傳輸時(shí)間。注意，如果不是使用APM自動(dòng)注入的Browser javascript，那么這部分時(shí)間將包含服務(wù)端程序處理時(shí)間。
請求等待處理的時(shí)間。
DOM解析時(shí)間（黃色部分）。瀏覽器獲得頁面數(shù)據(jù)，解析成DOM樹的時(shí)間。
頁面渲染時(shí)間（藍(lán)色部分）。瀏覽器從DOM樹繪制出用戶看到的頁面所消耗的時(shí)間。
Apdex曲線Apdex曲線是網(wǎng)站性能得分的曲線。對于有APM監(jiān)控的程序，該圖同時(shí)也會(huì)顯示出服務(wù)端進(jìn)程的Apdex得分。
吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量（ppm, pages per minute)。
頁面加載時(shí)間線通過與APM集成，New Relic的頁面加載時(shí)間分析可以記錄一個(gè)請求在處理過程中的各個(gè)階段所花費(fèi)的時(shí)間。下面是一個(gè)典型的頁面加載時(shí)間線：
其主要的階段如下：
頁面加載時(shí)間從用戶發(fā)起一個(gè)請求開始，包括用戶在瀏覽器地址欄輸入地址開始訪問，用戶在頁面上點(diǎn)擊一個(gè)鏈接，或者提交一個(gè)表單。
用戶的請求跨越網(wǎng)絡(luò)，抵達(dá)服務(wù)器，開始被服務(wù)端進(jìn)程處理。
服務(wù)端進(jìn)程完成對請求的處理，并發(fā)送一個(gè)HTML響應(yīng)。該響應(yīng)同樣要跨越網(wǎng)絡(luò)，回到瀏覽器端。
瀏覽器收到HTML響應(yīng)，開始解析以構(gòu)建DOM樹。
DOM樹構(gòu)建完成，瀏覽器將發(fā)送DOM就緒事件，并且根據(jù)此樹開始進(jìn)行頁面渲染。
頁面渲染完成，瀏覽器發(fā)出window load事件。
由此，我們可以把時(shí)間分成幾個(gè)部分：
前端時(shí)間 = DOM解析時(shí)間 + 頁面渲染時(shí)間
網(wǎng)絡(luò)傳輸時(shí)間 = 請求抵達(dá)服務(wù)器時(shí)間 + 響應(yīng)返回瀏覽器時(shí)間
服務(wù)端處理請求的時(shí)間
頁面訪問統(tǒng)計(jì)頁面訪問統(tǒng)計(jì)是用來匯總網(wǎng)站的頁面訪問量。New Relic用URL來區(qū)分不同的頁面。
在這個(gè)頁面上，可以選擇三種不同的排序方式：總的頁面加載時(shí)間，平均頁面加載時(shí)間，吞吐量。
對于每個(gè)請求，右側(cè)的圖表詳細(xì)的列出了每個(gè)階段花費(fèi)的時(shí)間，和一段時(shí)間內(nèi)的吞吐量。
還可以查看歷史性能數(shù)據(jù)。對于APM監(jiān)控的服務(wù)端進(jìn)程，還可以同時(shí)給出該請求對應(yīng)的后端事務(wù)的性能數(shù)據(jù)。
New Relic還可以統(tǒng)計(jì)用戶的瀏覽器類型，幫助你了解不同瀏覽器在你的用戶中的實(shí)際使用情況。
針對某一感興趣的瀏覽器類型，New Relic還可以給出詳細(xì)的基于版本的統(tǒng)計(jì)：
基于地理信息的統(tǒng)計(jì)基于用戶的地理信息的訪問統(tǒng)計(jì)也是New Relic的一個(gè)特色。它能夠詳細(xì)的給出不同位置的用戶對網(wǎng)站的訪問體驗(yàn)，幫助我們發(fā)現(xiàn)有問題的區(qū)域，以便能詳細(xì)的研究原因，使得我們能夠有針對性的進(jìn)行優(yōu)化。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/52294.html
摘要：性能概覽下圖為一個(gè)監(jiān)控的的性能概覽頁面該頁面主要包含下面幾個(gè)部分的內(nèi)容頁面加載時(shí)間曲線得分圖各瀏覽器的吞吐量會(huì)話追蹤，錯(cuò)誤，以及響應(yīng)時(shí)間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識(shí)分享給大家，希...
摘要：性能概覽下圖為一個(gè)監(jiān)控的的性能概覽頁面該頁面主要包含下面幾個(gè)部分的內(nèi)容頁面加載時(shí)間曲線得分圖各瀏覽器的吞吐量會(huì)話追蹤，錯(cuò)誤，以及響應(yīng)時(shí)間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識(shí)分享給大家，希...
摘要：性能監(jiān)控一概覽瑯琊書生本系列文章基于公司使用的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識(shí)分享給大家，希望可以給需要的朋友帶來幫助。提供了端到端的監(jiān)控能力，從前端頁面性能，到后臺(tái)服務(wù)端的響應(yīng)速度，都有非常詳盡的監(jiān)控?cái)?shù)據(jù)。 New Relic性能監(jiān)控（一）概覽 2018-04-12 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把...
摘要：性能監(jiān)控一概覽瑯琊書生本系列文章基于公司使用的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識(shí)分享給大家，希望可以給需要的朋友帶來幫助。提供了端到端的監(jiān)控能力，從前端頁面性能，到后臺(tái)服務(wù)端的響應(yīng)速度，都有非常詳盡的監(jiān)控?cái)?shù)據(jù)。 New Relic性能監(jiān)控（一）概覽 2018-04-12 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把...
摘要：性能監(jiān)控一概覽瑯琊書生本系列文章基于公司使用的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把我工作中了解到的知識(shí)分享給大家，希望可以給需要的朋友帶來幫助。提供了端到端的監(jiān)控能力，從前端頁面性能，到后臺(tái)服務(wù)端的響應(yīng)速度，都有非常詳盡的監(jiān)控?cái)?shù)據(jù)。 New Relic性能監(jiān)控（一）概覽 2018-04-12 瑯琊書生本系列文章基于公司使用New Relic的經(jīng)驗(yàn)，鑒于國內(nèi)較少有這方面的文章，因此把...
閱讀 3516·2021-09-22 15:17
閱讀 2878·2021-09-02 15:15
閱讀 1905·2019-08-30 15:54
閱讀 2072·2019-08-30 14:02
閱讀 2602·2019-08-29 16:58
閱讀 3049·2019-08-29 16:08
閱讀 1411·2019-08-26 12:24
閱讀 1713·2019-08-26 10:41
