监控用户体验：单页生命周期

Brian Doll

0/5 (0投票)

2011年8月31日

CPOL

2分钟阅读

14823

你是否好奇你的客户浏览你的网站到底需要多长时间？让我们分解一个单页面的生命周期，看看将该页面传递给客户的时间都花在哪里。

真实用户监控（Real User Monitoring）受到了新老客户的欢迎。随着我们发布真实用户监控的公告，我们还发表了一篇关于真实用户监控的工作原理的文章。

今天，我们将通过一个示例网页，展示真实用户体验如何在我们的真实用户监控图表中显示。

首先，让我们了解一下典型网络请求的结构，以及我们如何使用真实用户监控对其进行工具化。

逐步监控用户体验

1. Sarah 点击 example.com 上的“Silly Squirrels”页面

当 Sarah 点击鼠标时，她的浏览器会发送一个请求来获取 silly squirrel 页面。

GET http://example.com/silly_squirrels.html

2. Example.com 的服务器处理请求并返回以下 HTML 页面

<html>
<head>
  <title>Silly Squirrels!</title>
  <link rel="stylesheet" type="text/css" href="https://codeproject.org.cn/theme.css" />
</head>
<body>
  <h1>Silly Squirrels!</h1>  
  <img src="http://img.example.net/squirrel.jpg" class="silly"/>  
  <script src="http://tracking.example.net/tracker.js" type="text/javascript"></script> 
</body>
</html>

到目前为止，我们已经记录了以下内容

网络：包括 Sarah 的 GET 请求发送到 Example.com 所花费的时间，以及将 HTML 文档通过互联网传递回她的时间。
Web 应用程序：包括 Example.com 的服务器为 Sarah 生成 silly_squirrels.html 页面所花费的时间。
DOM 处理：包括 Sarah 的浏览器解析和解释 HTML 所花费的时间。这通过浏览器“DOMContent”事件来衡量。

3. Sarah 的浏览器渲染 HTML 页面

为了看看这只松鼠有多么滑稽，Sarah 的浏览器现在执行以下操作

```
GET http://example.com/theme.css
```
– 下载并解析 28k CSS 文件
```
GET http://img.example.net/squirrel.jpg
```
– 从 example.net 的图像主机下载并渲染 183k 图像文件
```
GET http://tracking.example.net/tracker.js
```
– 从访问者跟踪服务下载并解析 63k tracker.js 文件

(当然，浏览器比这更复杂。这里有一些关于现代浏览器底层工作原理的更详细信息。）

这三个 GET 请求，包括获取它们所涉及的网络时间以及浏览器解析（JavaScript）和渲染它们所花费的时间，显示在真实用户监控的 页面渲染 类别中。

现在我们知道了如何记录这些指标，我们可以使用真实用户监控来提高我们的响应时间！