前端页面性能指标与采集方式

忘是亡心i 2022-09-08 11:44 244阅读 0赞

#  #

[ 前端页面性能指标与采集方式 ][Link 1]

主要用于测试html的页面性能采集。介绍了传统的性能指标和采集方式，此外介绍了Google正在力推的以用户为中心的性能指标，以及相应的采集方式。

*  性能指标
 *  以用户为中心的性能指标
 *  示例demo
 *  参考资料

> 主要用于测试html的页面性能采集。介绍了传统的性能指标和采集方式，  
> 此外介绍了Google正在力推的以用户为中心的性能指标，以及相应的采集方式。

## 性能指标 ##

目前业界常用的指标就是：`白屏`、`首屏`、`domready`和`pageloaded`四个指标，在usual-index.html中，  
我们通过performance API获取到响应的指标值。

*  **白屏**

一般是认为DOM Tree构建时，解析到或的时候，我们认为是白屏结束的时间点。  
我们可以在这个时候使用performace.mark进行打点标记，最后可以通过performance的  
entry.startTime来获取白屏时间，其中entry.startTime是相对于performance.timing.navigationStart的时间。

<head>
    ...
    <script> // 通常在head标签尾部时，打个标记，这个通常会视为白屏时间 performance.mark("first paint time"); </script>
    </head>
    <body>
    ...
    <script> // get the first paint time const fp = Math.ceil(performance.getEntriesByName('first paint time')[0].startTime); </script>
    </body>

*  **首屏**

一般是首屏中的图片加载完毕的时候，我们认为是首屏结束的时间点。我们可以对首屏中的image做onload事件绑定，  
performace.mark进行打点标记，不过打点前先进行performance.clearMarks清除操作，以获取到多张图片最后加载完毕的时间。

<body>
    <div class="app-container">
        <img src="a.png" onload="heroImageLoaded()">
        <img src="b.png" onload="heroImageLoaded()">
        <img src="c.png" onload="heroImageLoaded()">
    </div>
    <script> // 根据首屏中的核心元素确定首屏时间 performance.clearMarks("hero img displayed"); performance.mark("hero img displayed"); function heroImageLoaded() { performance.clearMarks("hero img displayed"); performance.mark("hero img displayed"); } </script>
    ...
    ...
    <script> // get the first screen loaded time const fmp = Math.ceil(performance.getEntriesByName('hero img displayed')[0].startTime); </script>
    </body>

*  **domready与pageloaded**

这两个指标有相应的事件监听，即document的DOMContentLoaded和window.onload，直接在事件的回调中使用performance打点即可。

## 以用户为中心的性能指标 ##

这个是Google力推的指标，主要从4个视觉反馈阶段来描述页面性能。

<table> 
 <thead> 
  <tr> 
   <th>视觉反馈</th> 
   <th>页面状态</th> 
   <th>性能指标</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>是否发生？</td> 
   <td>导航是否成功启动？服务器是否有响应？</td> 
   <td>首次绘制 (FP)/首次内容绘制 (FCP)</td> 
  </tr> 
  <tr> 
   <td>是否有用？</td> 
   <td>是否已渲染可以与用户互动的足够内容？</td> 
   <td>首次有效绘制 (FMP)/主角元素计时</td> 
  </tr> 
  <tr> 
   <td>是否可用？</td> 
   <td>用户可以与页面交互，还是页面仍在忙于加载？</td> 
   <td>可交互时间 (TTI)</td> 
  </tr> 
  <tr> 
   <td>是否令人愉快？</td> 
   <td>交互是否顺畅而自然，没有滞后和卡顿？</td> 
   <td>耗时较长的任务（在技术上不存在耗时较长的任务）</td> 
  </tr> 
 </tbody> 
</table>

对应的指标如下图所示：  
![image][]  
此外，Google也提供了一些新的API，来获取相应的指标值。

*  **首次绘制 (FP)/首次内容绘制 (FCP)**

`PerformanceObserver` 为我们提供的新功能是，能够在性能事件发生时订阅这些事件，并以异步方式响应事件。

// Start observing the entry types you care about.  
observer.observe(\{ entryTypes: \[‘paint’\]\});

*  **首次有效绘制 (FMP)/主角元素计时**

目前尚无标准化的 FMP 定义，一般来说，是将 FMP 视为主角元素呈现在屏幕上的时刻。  
这个的计算方法就同上面介绍的首屏指标获取，只是首屏确定的是首页中的图片，而 FMP 确定的是核心元素。

*  **可交互时间 (TTI)**

TTI 主要是通过跟踪耗时较长的任务来确定，设置`PerformanceObserver`观察类型为 longtask 的条目，  
然后可以根据耗时较长的条目的startTime和duration，来大致确认页面处于idle的时间，从而确定 TTI 指标。  
Google希望将 TTI 指标标准化，并通过 PerformanceObserver 在浏览器中公开，但目前并不支持。  
目前只能通过一个 polyfill，检测目前的 TTI，适用于所有支持 Long Tasks API 的浏览器。  
该 polyfill 公开 getFirstConsistentlyInteractive() 方法，后者返回使用 TTI 值进行解析的 promise。  
用法如下所示：

1.  首先是在中设置PerformanceObserver，并指定监控类型为longtask。

<head>
    <script> // collect the longtask if (PerformanceLongTaskTiming) { window.__tti = { e: []}; const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // observe the longtask to get the time to interactive (TTI) if (entry.entryType === 'longtask') { window.__tti.e.concat(entry); } } }); observer.observe({ entryTypes: ['longtask']}); } </script>
    </head>

1.  然后引入tti-polyfill.js(可通过npm包获取)，获取到tti的值。

import ttiPolyfill from './path/to/tti-polyfill.js';
    ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
      ...
    });

*  **耗时较长的任务**

这个同TTI的第一步，设置PerformanceObserver，并指定监控类型为longtask，  
获取到的entry包含`提供方属性`，有助于追查导致出现耗时较长任务的代码。

## 示例demo ##

[https://github.com/huangwenming/learning-notes/tree/master/html-relevant/performance][https_github.com_huangwenming_learning-notes_tree_master_html-relevant_performance]

## 参考资料 ##

[http://www.alloyteam.com/2015/09/explore-performance/][http_www.alloyteam.com_2015_09_explore-performance]

[https://speedcurve.com/blog/user-timing-and-custom-metrics/][https_speedcurve.com_blog_user-timing-and-custom-metrics]

[https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics\#user-centric\_performance\_metrics][https_developers.google.com_web_fundamentals_performance_user-centric-performance-metrics_user-centric_performance_metrics]

[https://github.com/GoogleChromeLabs/tti-polyfill][https_github.com_GoogleChromeLabs_tti-polyfill]

[Link 1]: https://www.cnblogs.com/wmhuang/p/11156367.html
[image]: /images/20220829/598e1f8916084ece8cef7ce1fc1619af.png
[https_github.com_huangwenming_learning-notes_tree_master_html-relevant_performance]: https://github.com/huangwenming/learning-notes/tree/master/html-relevant/performance
[http_www.alloyteam.com_2015_09_explore-performance]: http://www.alloyteam.com/2015/09/explore-performance/
[https_speedcurve.com_blog_user-timing-and-custom-metrics]: https://speedcurve.com/blog/user-timing-and-custom-metrics/
[https_developers.google.com_web_fundamentals_performance_user-centric-performance-metrics_user-centric_performance_metrics]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#user-centric_performance_metrics
[https_github.com_GoogleChromeLabs_tti-polyfill]: https://github.com/GoogleChromeLabs/tti-polyfill