学习
实践
活动
专区
工具
TVP
写文章
专栏首页前端皮小蛋用户体验角度来看前端性能监控

用户体验角度来看前端性能监控

背景

谈到前端的性能监控,加载时长是一个绕不过的指标,那么加载时长应该怎样进行定义呢?

按照 wiki 上的定义:

  • 指代从开始到处于可执行状态所消耗的时长
  • 从开始到加载内容完成所消耗的时长

看完之后有一些疑惑:

  • 什么时候算开始?
  • 什么时候算可执行状态?
  • 什么时候算加载完成?
  • 加载本身是一个过程,怎么衡量用户在过程中的感知?

文字的表达没那么清晰,我们需要一些关键节点(指标)来辅助进行分析。

过程解析

从加载过程图来看:

  • 什么时候开始?-- startTime
  • 什么时候算可执行状态?-- domContentLoadedEventEnd
  • 什么时候算加载完成了?-- loadEventEnd

这些指标解决了大部分的问题,不过怎样对应在加载过程中用户的感知呢?

我们看一下用户常见的页面加载过程:

从上图的加载过程中可以找到以下几个关键阶段:

  • 何时可见:用户看到的页面什么时候不是空白的 - 图2&图3
  • 何时可用:用户看到的页面什么时候有足够内容呈现给用户 - 图5&图6
  • 何时可稳定交互:页面什么时候可以让用户进行交互 - 图8

接下来的问题就是怎样将这些节点转换为我们的指标呢?

用户性能指标

何时可见

从标准来看, 有相关的指标定义:

  • FP: First Paint,第一个像素点被绘制在屏幕上的时刻。
  • FCP: First Contentful Paint,第一个内容(文本/SVG/Image等)被绘制在屏幕上的时刻。

从定义上来看这两个指标配合足够我们评估用户看到的页面什么时候不是空白的了。

何时可用

继续寻找标准,不过很可惜,从 performance timing 没有找到,那么我们将目光转向业界来看一下:

  • FMP: First Meaningful Paint,代表着页面的主要内容被绘制在屏幕上的时刻
  • SI: Speed Index,代表着页面的可见内容填充速度
  • LCP: Largest Contentful Paint,代表着页面最大元素被绘制在屏幕上的时刻

从定义上来看都可以近似代表着用户能看到足够页面内容的时刻,不过前两个由于算法过于复杂,难以解释,且误报率过高,经过 W3C performance group讨论后已经被移除了,最终只留下 LCP。

何时可交互

业界同样有着定义:

  • FCI: First CPU Idle,代表着第一次CPU有空闲处理用户输入的时间
  • TTI: Time To Interactive,代表着页面稳定可交互的时间

从定义上来看可以近似代表着用户能进行交互的时刻,不过由于这两个指标在实际场景中差异很小,最终只留下 TTI。

TTI可以代表用户什么时候可以稳定与我们的页面进行交互,不过用户并不一定会在TTI后才进行交互,因此我们还需要了解用户实际交互的情况:

  • FID: First Input Delay,代表着用户第一次交互处理所消耗的时间

为什么只取第一次呢?

  • 第一个输入延迟会影响用户对网站响应能力的第一印象,第一印象对于塑造用户对网站质量和可靠性的总体印象至关重要。
  • 网站的最大的交互性问题发生在页面加载期间。因此,专注于改善网站的首次用户交互体验将对提高网站的整体交互性产生最大的影响。
  • 减少首次输入延迟的方法(如代码拆分,预先加载较少JavaScript等),与整个页面加载后的的预估输入延时优化方案并不同。所以,需要分离这些指标,记录不同的时刻的指标。

性能数据采集

指标已经有了,接下来要怎样进行采集呢?

采集 FP & FCP

从标准来看,可以使用paint timing api来进行采集:

const observer = new PerformanceObserver(function(list) {
    const perfEntries = list.getEntries();
    for (let i = 0; i < perfEntries.length; i++) {
        // Process entries
        // report back for analytics and monitoring
        // ...
    }
});

// register observer for paint timing notifications
observer.observe({entryTypes: ["paint"]});

不过从caniuse来看并不是完全兼容。

考虑使用 MutationObserver,MutationObserver 会在DOM树发生变化时触发注册的回调函数,参数会带有本次新增以及移除的节点,通过对新增/移除节点的监听,可以得到节点变化的情况,大致可以推导出渲染过程中的变化:

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

采集LCP

从标准来看,同样可以使用 PerformanceObserver 获取:

const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  let lastEntry = perfEntries[perfEntries.length - 1];
  // Process the latest candidate for largest contentful paint
});
observer.observe({entryTypes: ['largest-contentful-paint']});

同样从caniuse来看兼容并不好。

考虑使用 MutationObserver + IntersectionObserver,IntersectionObserver 会在DOM 节点发生可见度变化时触发注册的回调函数,参数会带有本次变化的节点及时刻等信息,通过对节点与viewport相交情况的监听,大致推导用户可见内容的变化:

const scoreTimeMap = {};
let maxScore = 0;
let lcpTime = 0;
intersectionEntries.forEach(entry => {
  const score = getIntersectionScore(entry);
  if (score !== 0) {
    const timePoint = Math.round(entry.time);
    if (scoreTimeMap[timePoint]) {
      scoreTimeMap[timePoint] = Math.max(score, scoreTimeMap[timePoint]);
    } else {
      scoreTimeMap[timePoint] = score;
    }
    if (scoreTimeMap[timePoint] > maxScore) {
      lcpTime = timePoint;
      maxScore = scoreTimeMap[timePoint];
    } else if (scoreTimeMap[timePoint] === maxScore) {
      lcpTime = Math.min(lcpTime, timePoint);
    }
  }
});
return Math.max(fcpTime, lcpTime);

采集TTI

目前暂时没有 TTI 的标准,从 Google 推出的定义来看:

找到一个5秒的窗口,其中网络请求不超过2个且没有长任务(>50ms),该5秒窗口之前的最后一个长任务结束的时间点就是TTI。

可以看到定义的关键是长任务和网络请求,先从长任务开始找:

var observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        // Process long task notifications:
        // report back for analytics and monitoring
        // ...
    }
});
// register observer for long task notifications
observer.observe({entryTypes: ["longtask"]});
// Long script execution after this will result in queueing
// and receiving "longtask" entries in the observer.

网络请求同样可以通过PerformanceObserver获取:

var observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
});
// register observer for resource notifications
observer.observe({entryTypes: ["resource"]});

采集FID

可以使用标准的api:

// We can also directly query the first input information.
new PerformanceObserver(function(list, obs) {
    const firstInput = list.getEntries()[0];

    // Measure the delay to begin processing the first input event.
    const firstInputDelay = firstInput.processingStart - firstInput.startTime;

    // Measure the duration of processing the first input event.
    // Only use when the important event handling work is done synchronously in the handlers.
    const firstInputDuration = firstInput.duration;

    // Obtain some information about the target of this event, such as the id.
    const targetId = firstInput.target ? firstInput.target.id : 'unknown-target';

    // Process the first input delay and perhaps its duration...

    // Disconnect this observer since callback is only triggered once.
    obs.disconnect();
}).observe({type: 'first-input', buffered: true});

出于兼容性考虑也可以自行监听['mousedown', 'keydown', 'touchstart', 'pointerdown']等事件进行处理,以web-vitals的实现为例:

const eachEventType = (callback: addOrRemoveEventListener) => {
  const eventTypes = [
    'mousedown',
    'keydown',
    'touchstart',
    'pointerdown',
  ];
  eventTypes.map((type) => callback(type, onInput, listenerOpts));
}

数据上报及架构图

在拿到数据之后,我们需要将其上报给服务端才能进行后续的性能分析,常见的上报方式有两种:

异步请求上报

图片请求上报

使用XHR/Fetch等方式进行上报

使用请求Gif图片方式上报

支持批量数据处理

存在数据体积限制

支持POST等请求方式

只支持GET请求方式

性能不及图片请求上报

性能更好

存在跨域等问题

天然支持跨域

根据业务场景任选一种即可,对于数据量的处理,可以考虑对数据进行采样/Beacon发送等方式减轻服务端压力。

架构图:

总结

性能指标的制定, 可以和真实用户的体验相关联,与用户体验相关的指标也还有很多可思考的方向,如视觉稳定性方面的 CLS(Cumulative Layout Shift)、页面运行阶段是否存在卡顿行为的 FPS(Frame Per Second)等。

前端的性能是非常关键而且极其重要的,在日常开发中可以考虑性能相关指标,在实验室环境进行调优尝试,同时在系统上线后,不断收集真实用户的数据,为持续优化提供思路。

文章分享自微信公众号:
前端皮小蛋

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

作者:lianxun.liu
原始发表时间:2021-04-21
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 【腾讯云前端性能(RUM)优化大赛】针对前端的通用用户首屏体验(LCP)优化

    由于站点部署在中国香港,所以大陆西北地区速度会下降,解决办法就是多部署几个后端,然后负载均衡,必要的时候还要对网络运营商进行分别解析,均衡

    Ar-Sr-Na
  • 【案例分享】腾讯游戏说:从 Web 性能评估探寻前端优化策略

    刘馨忆 腾讯 IEG 公共数据平台部前端开发工程师,硕士毕业于英国曼彻斯特大学。主要负责内容生态相关toB 业务系统的开发,对内容审核链路、数据可视化看板有丰富...

    腾讯云监控团队
  • 面向对象视角下的前端工程体系

    关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术

    ayqy贾杰
  • 超全对照!前端监控的性能指标与数据采集

    导语 | 前端监控可以让你更了解自己的网站,更早地发现和解决存在的问题,再通过优化来提升网站的性能和体验。那么,如何衡量一个网站的好坏?有什么指标?性能数据如何...

    腾讯云开发者
  • 前端性能监控(RUM)

    简介 腾讯云前端性能监控 (RUM) 是一站式前端监控解决方案,用户只需要安装 sdk 到自己的项目中,通过简单配置化,即可实现对用户页面质量的全方位守护,真正...

    腾讯云监控团队
  • APM性能分享观看有感

    持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

    小柔
  • 「前端工程化」该怎么理解?

    工程是指使用科学原理设计和制造机器、结构等,比如修桥、铺路、建隧道、造车、盖房子:

    ayqy贾杰
  • 前端技巧——性能优化篇

      前端发展至此,前端性能随之变成了一个很有意思的话题。从入门级别的初级工程师,到高级别的专家,都离不开性能问题。那么前端性能该如何理解呢?

    流眸
  • 年薪20万前端工程师必备技能,你都掌握了么?

    有软件工程方面的研究说,对于开发者个体而言,最优秀的开发者的生产效率约为平均值的2倍,而优秀的开发者会吸引其它优秀的人,或者激励与帮助团队中的其它成员,最终使团...

    用户1730674
  • 什么才是定制化 IDE 的核心价值?

    关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术

    ayqy贾杰
  • 【腾讯医药微信小程序性能优化案例】从0.9秒到0.5秒,原来这么简单!

    邓炜豪 腾讯医疗健康前端开发工程师,腾讯前端监控 Oteam PMC 成员,主要负责小程序监控系统的设计和开发。 听说代码无终点,坚持跑,就不会输。 前端性能优...

    腾讯云监控团队
  • 什么是移动端应用性能监控?具有哪些成本特性?

    在公司进行应用的管理和维护的问题上,数据更新和上传的成本是很多公司都非常注重的,如果使用移动端应用性能监控系统进行维护的话,可以大大降低这二者的成本,那么什么是...

    用户8715145
  • 前端性能分析工具利器

    作者:basinwang,腾讯 PCG 前端开发工程师 大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析。分析的方向除了业...

    腾讯技术工程官方号
  • H5前端监控实践

    为了便捷的衡量 H5 页面的速度、质量,高效定位问题,给用户提供更优质的服务。我们建设了自己的 H5 前端监控——天网云 ilook。

    织云平台团队
  • 美团点评金融平台Web前端技术体系

    背景 随着美团点评金融业务的高速发展,前端研发数量从 2015 年的 1 个人,扩张到了现在横跨北上两地 8 个事业部的将近 150 人。业务新,团队新,前端领...

    美团技术团队
  • 不敢相信,技术栈,居然被P站秒了

    PornHub的FE,分享了P站前端一些实践,英文比较晦涩难懂,故翻译整理了一下,很多同学对前端技术不是很熟悉,故加入了简单解释,希望对大家理解相关技术有帮助。...

    架构师之路
  • 聊一聊H5营销页面的性能优化

    我来自机票BU,目前负责机票营销的业务开发,众所周知营销业务的普遍特点是:访问量很大。每次营销活动,对于不同角色的同学,关注的点也不一样。

    前端森林
  • 一体化监控解决方案系列直播回顾(内含 PPT 附件)

    端到端的一体化监控解决方案 直播简介:全方位覆盖从业务请求发起到处理响应的监控场景应用,介绍如何通过一体化监控解决方案帮助提升客户业务可观测性、故障排查效率、以...

    腾讯云监控团队

扫码关注腾讯云开发者

领取腾讯云代金券