加载性能

操作步骤

1. 登录管理控制台。
2. 单击左侧，选择“管理与监管> 应用性能管理 APM”，进入APM服务页面。
3. 在左侧导航栏选择“前端监控 > 加载性能”，页面展示访问速度指标趋势图。鼠标停留在折线节点处，可以展示该节点详细指标信息。
   图1 访问速度指标趋势图
   

4. “页面性能分析”展示访问某个页面性能数据分析。
   图2 页面性能分析
   

5. 单击“URL”列的某一条URL链接，展示该URL加载性能的指标数据值。
   图3 加载性能URL
   

   表1 加载性能相关参数说明

   参数名称	说明
   页面URL	页面链接。
   加载次数	页面加载次数。
   平均加载时间	页面平均加载时间。用户打开一个网站时，从开始加载直到浏览器首页面内容渲染完成的耗时。
   首屏时间（FCP）	页面渲染出第一个内容（文本、图片、canvas等）的时间。
   白屏时间（FP）	页面渲染出第一个像素点的时间，一般发生在HTML解析完成或者解析一部分时触发。
   可交互时间（TTI）	页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
   首次有效绘制	浏览器从响应用户输入网址地址，到首次渲染有意义的内容的时间。
   图片数量	页面展示图片的数量。
   首载接口数量	首次加载接口的数量。
   接口数量	访问某一个页面的url接口数量。
   静态资源数量	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的数量。
   静态资源大小	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的大小。
   首载资源大小	首次加载资源的大小。
   JS错误率	JS错误率=运行JavaScript触发的错误总数/运行JavaScript的总数。
   资源加载耗时	页面加载资源消耗的时间。
   网络耗时	网络通信中消耗的时间。
   页面加载时长	页面加载时长=网络耗时+DOM解析+资源加载。
   访问时间	访问页面的时间。
   累计布局偏移（CLS）	累计布局偏移(CLS)会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。
   绘制延迟（INP）	绘制延迟(INP)它是一种网站性能度量指标，用于衡量用户界面的响应性，即网站对用户的交互（如点击或按键）做出反应的速度。(默认关闭，通过初始化参数中的enableInp开关控制。)
   最大内容绘制（LCP）	最大内容绘制(LCP)是页面内首次开始加载的时间点，到可视区域内最大的图像或者文本块完成渲染的相对时间。

6. 单击“接口数量”下面的“查看”，展示某url调用接口的详细信息。包括：请求总数、错误次数、错误率、慢请求次数、慢请求占比、成功调用平均耗时以及指定API链路追踪列表、API汇总列表和状态码汇总列表。
   图4 url详细信息
   

   表2 url调用接口相关参数说明

   参数名称	说明
   请求总数	API请求的请求总数。
   错误次数	API请求的错误次数。
   错误率	API请求的错误率。
   慢请求次数	API请求的慢请求次数。
   慢请求占比	API请求的慢请求占比。
   成功调用平均耗时	API请求成功调用平均耗时。

   • 指定API链路追踪列表：展示指标包括：上报时间、url、API、设备ID、uid、tag、等待耗时、连接耗时、TTFB请求时间、下载时间以及API请求状态。详细操作参见步骤4。
   • API汇总列表：展示指标包括：API、请求总数以及请求次数占比。详细操作参见API汇总列表。
   • 状态码汇总列表：展示状态码、请求总数以及请求次数占比。详细操作参见请求状态码分布详细信息下钻。

7. 查看页面加载瀑布图，将页面加载的各部分耗时分成网络耗时、DOM解析、资源加载三个主要部分显示在右上角，并将网络连接的细节拆分到瀑布图中显示。

   

   表3 页面加载时间相关参数说明

   参数名称	说明
   DNS查询	查找此页面的DNS所花费的时间。
   TCP连接	用户连接到服务器所需的时间，其中包括SSL握手、SSL建连、TCP的三次握手等时间。
   SSL建连	SSL建联的耗时，在HTTPS请求中存在此耗时，被包含在TCP连接时间中。
   请求响应（ttfb）	请求发送到收到第一个字节的时间。
   内容传输	浏览器接收服务器响应的耗时。
   网络耗时	从用户发出页面请求到浏览器接收服务器响应的耗时，包括DNS查询、TCP连接、请求响应、网络传输等事件。
   DOM解析	DOM解析阶段，绘制浏览器DOM结构树的时间，src外链资源未完成，此阶段一般在页面上无表现。
   资源加载	文档解析完成，HTML、JS解析完成，CSS、图片等资源加载完成的时间。

8. 移到页面最下方“页面单次访问性能分析”表格，单击“查看详情”，查看用户单次访问的页面详情信息。

   

9. 进入单次访问详情页面，查看用户页面性能的详细信息。页面主要分为三个模块：页面数值信息、页面加载时间分解图、资源加载分析图。
   • 页面数值信息

     

   • 页面加载时间分解图，展示从页面加载到页面加载完成的各部分耗时，瀑布图参数说明见表3。

     

   • 资源加载分析图，展示视图加载事件和周围上下文。不同资源类型有不同的颜色，柱子长度代表加载资源的耗时。悬浮到柱子上方可看到此加载时间的具体信息，可通过右上角的页签组件进行类型的过滤。