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的一个特点。它可以详细的给出不一样位置的用户对网站的访问体验，帮助咱们发现有问题的区域，以便能详细的研究缘由，使得咱们可以有针对性的进行优化。