加载性能

操作步骤

1. 登录APM控制台。
2. 单击左侧，选择“管理与监管> 应用性能管理 APM”，进入APM服务页面。
3. 在左侧导航栏选择“前端监控 > 加载性能”，默认展示该站点“加载性能”详情。
   • 单击“站点”、“运营商”、“地域”、“浏览器”以及“操作系统”的下拉菜单选择筛选条件，进一步查看所需要的信息。
   • 展示平均加载时间、P75 LCP最大内容绘制、JS错误数、慢接口占比、接口成功率、资源加载次数、资源加载成功率、资源加载平均耗时、静态资源加载次数、静态资源加载平均耗时、动态资源加载次数以及动态资源加载平均耗时。
   • 页面性能：展示访问速度指标趋势图，性能趋势图、性能样本分布、加载次数、加载过程耗时、加载状态。
   • 详情分析：展示页面性能分析列表以及资源加载列表。

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

     参数名称	说明
     平均加载时间	页面加载的平均时间。
     P75 LCP最大内容绘制	最大内容绘制(LCP)是页面内首次开始加载的时间点，到可视区域内最大的图像或文本块完成渲染的相对时间。这里取的是P75分位数的值。
     JS错误数	JS错误的数量。
     慢接口占比	慢接口指加载耗时大于1000ms的调用，慢接口占比=慢接口数量/总接口数量。
     接口成功率	接口成功率=接口成功数/总接口。
     资源加载次数	静态资源和动态资源加载总次数。
     资源加载成功率	动态资源和静态资源加载的成功率。
     资源加载平均耗时	静态资源和动态资源加载平均耗时。
     静态资源加载次数	静态资源加载次数。
     静态资源加载平均耗时	静态资源加载的平均耗时。
     动态资源加载次数	动态资源加载的次数。
     动态资源加载平均耗时	动态资源加载的平均耗时。

4. 在加载性能页面的右上角，单击时间维度选择按钮，默认“近20分钟”。

   当前支持“近20分钟”、“近1小时”、“近3小时”、“近6小时”、“近1天”、“今天”、“昨天”、“近7天”、“近30天”以及自定义。

页面性能

详情分析

“详情分析”展示页面性能分析列表以及资源加载列表。

1. 在左侧导航栏选择“前端监控 > 加载性能”，向下滚动页面，默认展示“详情分析”页签。
   • 页面性能分析

     展示页面性能数据分析信息详情，包括：页面URL、加载次数、P75 LCP最大内容绘制、平均LCP最大内容绘制、P75 LCP最大内容绘制-含预渲染、平均LCP最大内容绘制-含预渲染、平均加载时间、FCP首屏时间、FP白屏时间、TTI可交互时间、CLS累积布局偏移以及INP绘制交互。

     • 在页面性能分析列表的搜索框输入搜索条件后，单击，查看满足搜索条件的页面性能分析列表。
     • 单击页面性能分析列表右上角的自定义列表项，使界面上显示您需要查看的指标数据。
     • 页面性能分析列表默认按照“加载次数”降序排列。
     1. 单击页面性能分析“页面URL”列的某一条URL链接，展示该URL加载性能的指标数据值。

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

        参数名称	说明
        加载次数	页面加载次数。
        平均加载时间	页面平均加载时间。用户打开一个网站时，从开始加载直到浏览器首页面内容渲染完成的耗时。
        FCP首屏时间	页面渲染出第一个内容（文本、图片、canvas等）的时间。
        FP白屏时间	页面渲染出第一个像素点的时间，一般发生在HTML解析完成或解析一部分时触发。
        TTI可交互时间	页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
        首次有效绘制	浏览器从响应用户输入网址地址，到首次渲染有意义的内容的时间。
        P75 LCP最大内容绘制	最大内容绘制(LCP)是页面内首次开始加载的时间点，到可视区域内最大的图像或文本块完成渲染的相对时间。这里取的是P75分位数的值。
        图片数量	页面展示图片的数量。
        首载接口数量	首次加载接口的数量。
        接口数量	访问某一个页面的url接口数量。
        静态资源数量	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的数量。
        首载资源大小	首次加载资源的大小。
        JS错误率	JS错误率=运行JavaScript触发的错误总数/运行JavaScript的总数。
        资源加载耗时	页面加载资源消耗的时间。
        网络耗时	网络通信中消耗的时间。

        • 页面访问速度指标趋势图
          展示某条URL访问页面的加载次数、平均加载时间、FCP首屏时间、FP白屏时间、TTI可交互时间、CLS累积布局偏移、INP绘制交互以及平均LCP最大内容绘制。各个参数说明参见表2。

          1. 单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
          2. 鼠标停留在柱形图上，可以展示该节点详细指标信息。
        • 性能趋势图

          在某个时间点，某个指标的P50、P75、P90、P95、P99的趋势图

          1. 如图中1所示，单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
          2. 如图中2所示，在下拉菜单中选择指标，包括：LCP最大内容绘制、FCP首屏时间、CLS累积布局偏移、FP白屏时间以及INP绘制交互。
          3. 如图中3所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
        • 性能样本分布
          在某个时间段内，加载次数的柱形图。鼠标停留在柱形图上，可以展示该节点详细指标信息。

          1. 如图6中1所示，在下拉菜单中选择指标，包括：LCP最大内容绘制、FCP首屏时间、CLS累积布局偏移、FP白屏时间以及INP绘制交互。

             如图6所示，LCP最大内容绘制时间在0~1000s之间的加载次数为6次。

          2. 如图6中2所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
             图6 性能样本分布
             
        • 页面资源加载时间趋势图
          展示某条URL页面资源加载时间、静态资源数量、接口数量以及静态资源大小。

          表4 页面资源加载时间指标相关参数说明

          参数名称	说明
          资源加载时间	页面加载资源消耗的时间。
          静态资源数量	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的数量。
          接口数量	访问某一个页面的url接口数量。
          静态资源大小	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的大小。

        • 加载性能分布图

          展示URL加载性能在区间内的加载次数。鼠标停留在柱形图上，可以展示该节点详细指标信息。

        • 页面加载瀑布图

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

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

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

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

             页面单次访问性能分析默认按照“访问时间”降序排列。

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

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

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

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

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

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

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

     展示资源加载信息详情，包括：资源名称、资源类型、请求次数、平均耗时(ms)、失败率(%)、慢请求以及慢请求占比(%)。

     • 在资源加载列表的搜索框输入搜索条件后，单击，查看满足搜索条件的资源加载列表。
     • 单击资源加载列表右上角的自定义列表项，使界面上显示您需要查看的指标数据。
     • 资源加载列表默认按照“请求次数”降序排列。
     • 资源加载列表支持详细信息下钻。
       1. 单击资源加载列表列中的某一条资源名称，展示该加载资源的加载次数、平均加载时间、资源请求失败率、数据量、TCP耗时、SSL耗时以及DNS耗时等信息。

          加载情况：鼠标放置在“加载情况”的趋势图上，则展示当前时间的慢请求延时、慢请求占比、错误请求延时以及错误请求占比。

          请求耗时：鼠标放置在“请求耗时”的趋势图上，则展示当前时间的平均请求时间、平均RTT、平均DNS时间、平均TCP时间以及平均SSL时间。

          加载状态码：鼠标放置在“加载状态码”的趋势图上，则展示当前时间的各状态码占比。

          地域分布：鼠标放置在“地域分布”的趋势图上，则展示当前时间的各地域占比。

          浏览器分布：鼠标放置在“浏览器分布”的趋势图上，则展示当前时间的各浏览器占比。

          系统分布：鼠标放置在“系统分布”的趋势图上，则展示当前时间的各系统占比。

          运营商分布：鼠标放置在“运营商分布”的趋势图上，则展示当前时间的各运营商占比。

          列表：展示页面网络资源详情，包括访问时间、状态码、平均请求时间、平均RTT、平均DNS时间、平均TCP时间、平均SSL时间以及会话ID。

       2. 单击“访问时间”列的某一条访问时间，展示该访问时间的访问数据。
          • 加载信息：展示当前时间的加载信息，包括：加载时间(LoadTime)、静态资源大小、状态码、请求响应 (ttfb)、内容传输耗时、TCP耗时、SSL耗时以及DNS耗时。
          • 访问信息：展示当前时间的访问信息，包括：访问页面以及访问时间。
          • 访问用户：展示当前时间的访问用户的信息，包括：用户ID、地域、浏览器、分辨率、用户IP、操作系统、运营商以及会话ID。

            单击“会话ID”跳转至“会话追踪”页面，展示用户轨迹的详细信息。“会话追踪”介绍请参见会话追踪。

          • 页面加载分解图：展示当前时间的页面加载信息的柱状图。包括：DNS查询、TCP连接、SSL建连、内容传输耗时以及内容传输五种指标，在某个时间点的内容传输。内容传输包括：起始时间、结束时间以及耗时。