NewRelic性能监控（三）浏览器端监控因此，把自己在工作中学到的知识分享给大家，希望对有需要的朋友有所帮助。NewRelicBrowser简介NewRelicBrowser是一款前端性能监控工具。这个领域的监控常被称为“真实用户监控”（RealUserMonitoring，RUM）。主要用于查看前端页面的加载时间，衡量真实用户的体验。然而，浏览器能做的远不止于此，它还可以提供以下监控数据：独立会话性能AJAX请求Javascript错误此外，如果浏览器和APM同时用于同一个Web程序，NewRelic可以将两者的数据关联在一起，对于每个用户请求，我们可以获得端到端的详细数据包括：前端消耗的时间，包括页面加载/解析/渲染的详细时间。在服务器上花费的时间，包括网络通信时间和后台服务器处理时间。如果后台使用了数据库，NewRelic还可以分析APM端数据库操作的耗时。用户的地理位置信息。浏览器的类型和版本，以及用户的操作系统类型。安装方法N??ewRelicBrowser通过一小段Javascript代码（或者也可以称之为“代理”）在浏览器端收集页面的各种性能数据，从而达到监控的目的。它有以下几种安装方式：使用APM自动注入。如果您的应用程序使用NewRelicAPM监控，那么您使用APM代理自动将此javascript代码段注入您的前端页面。这是最简单的安装方法。请注意，如果您的网站具有通过CDN而未通过服务器进程的静态内容，则此方法将不起作用。手动将代码片段插入您的页面。这种方法更灵活，可以为您提供更多控制权。比如上面提到的来自CDN的静态页面。性能概览下图是一个浏览器监控的App性能概览页面：该页面主要包括以下部分：页面加载时间曲线、Apdex得分图、各浏览器的吞吐会话跟踪、JS错误、Ajax响应时间。这部分功能只对专业版用户开放。页面加载时间曲线这条曲线用不同的颜色来区分一个用户请求的不同部分所花费的时间：底部是后端服务器处理时间（紫色部分）。这部分时间是服务端程序花费的时间，是APM计算出来的。上面棕色部分是网络时间。这部分时间就是用户请求在网络上的传输时间。注意，如果不使用APM自动注入的Browserjavascript，这部分时间会包含服务端程序处理时间。请求等待处理的时间量。DOM解析时间（黄色部分）。浏览器获取页面数据并解析成DOM树的时间。页面渲染时间（蓝色部分）。浏览器绘制用户从DOM树中看到的页面所花费的时间。Apdex曲线Apdex曲线是网站性能得分的曲线。对于APM监控的程序，该图表还将显示服务器进程的Apdex分数。吞吐量吞吐量按浏览器类型绘制，单位为每分钟页数（ppm，每分钟页数）。页面加载时间线NewRelic的页面加载时间分析与APM集成，可以记录请求在其处理的各个阶段所花费的时间。下面是一个典型的页面加载时间线：主要阶段如下：页面加载时间从用户发起请求开始，包括用户在浏览器地址栏输入地址开始访问，用户点击页面上的链接页面，或提交表单。用户的请求穿过网络，到达服务器，开始由服务器进程处理。服务器进程完成对请求的处理并发送HTML响应。响应还必须通过网络返回到浏览器。浏览器收到HTML响应并开始解析以构建DOM树。当DOM树构建完成后，浏览器会发送一个DOM就绪事件，并开始基于树渲染页面。页面呈现后，浏览器发送窗口加载事件。由此，我们可以将时间分为几个部分：前端时间=DOM解析时间+页面渲染时间网络传输时间=请求到达服务器时间+响应返回浏览器时间服务器处理请求页面访问统计页面访问统计用于总结网站的页面浏览量。NewRelic使用URL来区分不同的页面。在此页面上，您可以选择三种不同的排序方式：总页面加载时间、平均页面加载时间和吞吐量。对于每个请求，右侧的图表详细说明了每个阶段花费的时间，以及随时间变化的吞吐量。您还可以查看历史性能数据。对于APM监控的服务器进程，也可以同时给出请求对应的后端事务的性能数据。基于浏览器类型的统计NewRelic还可以统计用户的浏览器类型，帮助您了解您的用户对不同浏览器的实际使用情况。对于感兴趣的浏览器类型，NewRelic还可以给出基于版本的详细统计：基于地理信息的统计基于用户地理信息的访问统计也是NewRelic的一个特点。可以给不同位置的用户详细的访问网站的体验，帮助我们找到有问题的地方，便于我们详细研究原因，从而有针对性地进行优化。
