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