前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端页面性能指标与采集方式

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

作者头像
用户1217459
发布2019-07-10 14:33:57
2.2K0
发布2019-07-10 14:33:57
举报
文章被收录于专栏:Young Dreamer

性能指标

目前业界常用的指标就是:白屏首屏domreadypageloaded四个指标,在usual-index.html中, 我们通过performance API获取到响应的指标值。

  • 白屏

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

代码语言:javascript
复制
<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清除操作,以获取到多张图片最后加载完毕的时间。

代码语言:javascript
复制
<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打点即可。

代码语言:javascript
复制
<script>
    document.addEventListener('DOMContentLoaded', ()=> {
        performance.mark("dom ready");
    });
    window.onload = ()=> {
        performance.mark("page loaded");
        // get the domReady time
        const domReady = Math.ceil(performance.getEntriesByName('dom ready')[0].startTime);
        // get the page loaded time
        const pageLoad = Math.ceil(performance.getEntriesByName('page loaded')[0].startTime);
    }
</script>

以用户为中心的性能指标

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

视觉反馈

页面状态

性能指标

是否发生?

导航是否成功启动?服务器是否有响应?

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

是否有用?

是否已渲染可以与用户互动的足够内容?

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

是否可用?

用户可以与页面交互,还是页面仍在忙于加载?

可交互时间 (TTI)

是否令人愉快?

交互是否顺畅而自然,没有滞后和卡顿?

耗时较长的任务(在技术上不存在耗时较长的任务)

对应的指标如下图所示:

此外,Google也提供了一些新的API,来获取相应的指标值。

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

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

代码语言:javascript
复制
let perfomanceMetrics = {};
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        // `entry` is a PerformanceEntry instance.
        // `name` will be either 'first-paint' or 'first-contentful-paint'.
        const metricName = entry.name;
        const time = Math.round(entry.startTime + entry.duration);
        if (metricName === 'first-paint') {
            perfomanceMetrics.fp = time;
        }
        if (metricName === 'first-contentful-paint') {
            perfomanceMetrics.fcp = time;
        }
    }
});

// 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。
代码语言:javascript
复制
<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的值。
代码语言:javascript
复制
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

参考资料

http://www.alloyteam.com/2015/09/explore-performance/

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://github.com/GoogleChromeLabs/tti-polyfill

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 性能指标
  • 以用户为中心的性能指标
  • 示例demo
  • 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档