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