支持的技术
编辑支持的技术编辑
页面加载指标编辑
RUM 代理尝试捕获页面加载事务中页面加载/渲染的整体用户体验。它包括所有依赖资源,例如 JavaScript、样式表、图像等,这些资源作为页面的一部分包含在内。除了捕获作为跨度的资源计时信息外,事务还包括导航跨度——与捕获的其他信息相关联的标记,使瀑布图更具吸引力。
-
域名查找
- 当前页面 DNS 查询的持续时间:
domainLookupEnd
-domainLookupStart
。 -
与服务器建立连接
- 与服务器建立 TCP 连接的持续时间,包括 HTTPS 页面 TLS 协商时间:
connectEnd
-connectStart
。 -
请求和接收文档
- 服务器的整体响应时间,包括最后一个字节:
responseEnd
-requestStart
。 -
解析文档,执行同步脚本
- HTML 文档解析时间,包括同步样式表和脚本:
tagsdomInteractive
-domLoading
。 -
触发“DOMContentLoaded”事件
- 当浏览器完成解析文档时触发。当有多个监听器或执行逻辑时很有用:
domContentLoadedEventEnd
-domContentLoadedEventStart
。 -
触发“load”事件
- 当浏览器完成加载其文档和依赖资源时触发:
loadEventEnd
-loadEventStart
。 -
首字节时间 (TTFB)
- 从浏览器对初始文档发出 HTTP 请求到接收页面的第一个字节的持续时间。TTFB 可从 Navigation Timing API 获取,作为
reponseStart
时间戳,并在 Elasticsearch 文档中捕获为事务标记transaction.marks.agent.timeToFirstByte
。
为了捕获页面的整体用户体验,包括所有上述信息以及在执行依赖资源期间可能触发的其他资源请求,page-load
事务持续时间可能并不总是反映浏览器的 Load 事件,并且可以扩展到事件之外。
如果您有兴趣准确测量加载事件的持续时间,可以使用 Fire load event
跨度或从 Elasticsearch 文档中可用的事务标记 transaction.marks.agent.domComplete
中提取信息。
页面加载事务相对于 Navigation Timing API 中的 fetchStart
时间戳进行测量。
以用户为中心的指标编辑
为了了解网页的性能特征,超越页面加载以及用户如何感知性能,代理支持捕获这些 响应能力指标。
-
首次内容绘制 (FCP)
- 侧重于初始渲染,并测量从页面开始加载到页面内容的任何部分显示在屏幕上的时间。代理使用浏览器中可用的 Paint Timing API 来捕获计时信息。FCP 作为所有基于 Chromium 的浏览器的
page-load
事务的事务标记捕获(Chrome >60、Edge >79、Opera >47 等)。 -
最大内容绘制 (LCP)
- 一个新的页面加载指标,表示从页面开始加载到关键元素(最大文本、图像、视频元素)显示在屏幕上的时间。LCP 可通过浏览器中的 LargestContentfulPaint API 获取,该 API 依赖于草案 Element Timing API。LCP 是 核心 Web 指标 之一,仅在 Chrome >77 中可用。作为
page-load
事务的事务标记捕获,在页面加载的前 2.5 秒 内保持 LCP,以提供良好的用户体验。 -
首次输入延迟 (FID)
- FID 量化了用户在页面加载期间与页面交互时的体验。它测量的是用户首次与您的网站交互(鼠标点击、点击、选择下拉菜单等)到浏览器能够响应该交互的时间之间的间隔。FID 是 核心 Web 指标 之一,仅在 Chrome >85 中通过 Event Timing API 可用。FID 作为
page-load
事务的First Input Delay
跨度捕获。将 FID 保持在 100 毫秒以下,以提供良好的用户体验。 -
总阻塞时间 (TBT)
- 从首次内容绘制到事务完成之间发生的每个长时间任务的阻塞时间(超过 50 毫秒的持续时间)的总和。 总阻塞时间 是 交互时间 (TTI) 的一个很好的伴侣指标,TTI 是实验室指标,在现场无法通过浏览器 API 获取。代理根据页面加载生命周期中发生的长时间任务数量来捕获 TBT。作为
page-load
事务的Total Blocking Time
跨度捕获。 -
累积布局偏移 (CLS)
- 指标表示页面整个生命周期中发生的意外布局偏移的累积分数。CLS 是 核心 Web 指标 之一,以下是 Chrome 如何计算分数。保持分数 低于 0.1,以提供良好的用户体验。
-
长时间任务
- 长时间任务是任何用户活动或浏览器任务,这些任务会长时间(超过 50 毫秒)占用 UI 线程,并阻止其他关键任务(帧速率或输入延迟)执行。代理使用 Long Task API,该 API 仅在基于 Chromium 的浏览器(Chrome >58、Edge >79、Opera >69)中可用。作为所有托管事务的
Longtask<name>
跨度捕获。详细了解 长时间任务跨度 以及如何解释它们。 -
用户计时
- The User Timing spec exposes API for developers to add custom performance entries to their web application. These custom metrics allow users to measure the hot paths of the app code that helps to identify a good user experience. RUM agent records all of the performance.measure calls as spans by their measure name in the waterfall for all managed transactions.
用户交互edit
RUM 代理会自动检测应用程序注册的点击事件监听器。点击事件被捕获为 user-interaction
事务。但是,为了避免向服务器发送太多 user-interaction
事务,代理会丢弃没有跨度的事务(例如,没有网络活动)。此外,如果点击交互导致路由更改,则会捕获 route-change
事务。
事务名称可以通过使用 name
或更优的 data-transaction-name
HTML 属性来影响。以下是一些基于 HTML 属性的事务名称示例
-
<button></button>
:Click - button
-
<button name="purchase"></button>
:Click - button["purchase"]
-
<button data-transaction-name="purchase"></button>
:Click - purchase
单页应用程序edit
所有历史 pushState
事件都将被捕获为事务。大多数这些事务可以通过使用特定于框架的集成来增强。对于所有不支持的框架/库,您可以通过创建 自定义事务 和使用 跨度 API 的自定义跨度来检测应用程序。
框架edit
代理支持 与某些框架的集成.
要检测自定义指标,例如 React、Angular、Vue 等框架上组件的渲染时间或挂载时间,请使用 自定义事务 API.
核心 RUM 代理支持基于多页 (MPA) 和单页架构 (SPA) 的网站。核心 RUM 代理可以单独用于 SPA 网站,但我们建议出于以下原因使用我们特定于框架的集成
-
页面按路由更好地分组: 这会导致
transaction.name
字段映射到 SPA 应用程序中声明的实际应用程序路由路径。 - 精确的 SPA 导航渲染: 集成包会挂钩到组件生命周期,并正确测量 SPA 事务的持续时间。核心 RUM 代理无法确定何时渲染 SPA 导航,而是会等待最后一个网络请求,然后才认为 SPA 转换已完成。
- 改进的错误捕获: 例如,当在 Angular 应用程序中抛出错误时,框架集成会自动捕获它。但是,核心 RUM 代理无法捕获错误,因为默认错误处理程序不会将错误重新抛出为浏览器事件。
平台edit
支持以下平台