前端性能优化之谈谈常见的性能指标及上报策略

栏目: IT技术 · 发布时间: 4年前

内容简介:从

前端性能优化之谈谈常见的性能指标及上报策略

背景

性能优化是所有前端人的追求,在这条路上,方法多种多样。这篇文章,说一下可以怎样定义性能指标及上报。

指标

FP

含义

FP,全称 First Paint ,翻译为 首次绘制 ,是时间线上的第一个 时间点 ,它代表网页的第一个像素渲染到屏幕上所用时间,也就是页面在屏幕上首次发生视觉变化的时间。

统计逻辑

通过performance.getEntriesByType('paint’),取第一个pain的时间。如:

function getFPTime(){
    const timings = performance.getEntriesByType('paint')[0];
    return timings ? Math.round(timings.startTime) : null
}

FCP

含义

FCP,全称 First Contentful Paint ,翻译为 首次内容绘制 ,顾名思义,它代表浏览器第一次向屏幕绘 内容

注意:只有首次绘制文本、图片(包含背景图)、非白色的canvas或SVG时才被算作FCP。

统计逻辑

通过performance.getEntriesByType('paint’),取第二个pain的时间,或者通过Mutation Observer观察到首次节点变动的时间。如:

const domEntries = []
const observer = new MutationObserver((mutationsList)=>{
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        if (mutation.type == 'addedNodes') {
            //TODO新增了节点,做处理,计算此时的可见性/位置/出现时间等信息,然后 push 进数组
            ...
            domEntries.push(mutation)
        }
    }
});

function getFPTime(){
    const timings = performance.getEntriesByType('paint');
    if(timings.length > 1)return timings[1]
    return timings ? Math.round(timings.startTime) : null
    //伪代码,算 DOM 变化时的最小那个时间,即节点首次变动的时间
    return Math.round(domEntries.length ? Math.min(...domEntries.map(entry => entry.time)) : 0);
}

MutationObserver 理解及使用补充:

  • https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

  • https://javascript.ruanyifeng.com/dom/mutationobserver.html

注意

FP与FCP这两个指标之间的主要区别是:FP是当浏览器开始绘制内容到屏幕上的时候,只要在视觉上开始发生变化,无论是什么内容触发的视觉变化,在这一刻,这个时间点,叫做FP。

相比之下,FCP指的是浏览器首次绘制来自DOM的内容。例如:文本,图片,SVG,canvas元素等,这个时间点叫FCP。

FP和FCP可能是相同的时间,也可能是先FP后FCP。

FMP

含义

FMP,全称 First Meaningful Paint ,翻译为 首次有意义的绘制 ,是页面主要内容出现在屏幕上的时间, 这是用户感知加载体验的主要指标。目前尚无标准化的定义, 因为很难以通用的方式去确定各种类型页面的关键内容。

统计逻辑

目前没有统一逻辑,阿里有个标准为最高可见增量元素,采用深度优先遍历方法,详细可见:https://zhuanlan.zhihu.com/p/44933789

其次,可以自定义,比如通 Mutation Observer 观察页面加载的一段时间(如前20s)内页面节点的变化, 即元素新增/移除/隐藏等变化记录下来,这样可以得到页面元素的可见时间点及元素与可视区域的交叉信息等。

然后,自定义一个计算公式,比如根据元素的类型进行权重取值(div 权重1,img 权重2等), 然后取元素与可视区域的交叉区域面积、可见度、 权重值之间的乘积为元素评分。

根据上面得到的信息, 以时间点为X轴, 该时间点可见元素的评分总和为Y轴, 取最高点对应的最小时间为页面主要内容出现在屏幕上的时间。

FID

含义

FID,全称 First Input Delay ,翻译为 首次输入延迟 ,是测量用户首次与您的站点交互时的时间(即当他们单击链接/点击按钮/使用自定义的JavaScript驱动控件时)到浏览器实际能够回应这种互动的时间。

统计逻辑

方式一,通过 performanceObserver (目前支持性为88.78%)观察类型为 first-input 的entry,获得其startTime/duration等数即可

方式二,初始化时为特定事件类型(click/touch/keydown)绑定通用统计逻辑事件,开始调用时从 event.timeStamp 取开始处理的时间(这个时间就是首次输入延迟时间),在事件处理中注册 requestIdleCallback 事件回调onIdleCallback,当onIdleCallback被执行时,当前时间减开始的 event.timeStamp 即为duration时间

参考代码:

// 方式一
function getFIDTime(){
    const timings = performance.getEntriesByType('first-input')[0];
    return timings ? timings : null
}
// 方式二,以下代码仅代表思路

['click','touch','keydown'].forEach(eventType => {
    window.addEventListener(eventType, eventHandle);
});

function eventHandle(e) {
    const eventTime = e.timeStamp;
    window.requestIdleCallback(onIdleCallback.bind(this, eventTime, e));
}

function onIdleCallback(eventTime, e) {
    const now = window.performance.now();
    const duration = now - eventTime;

    return {
        duration: Math.round(duration),
        timestamp: Math.round(eventTime)
    }

    ['click','touch','keydown'].forEach(eventType => {
        window.removeEventListener(eventType, eventHandle);
    });
}

Event 对象的更多理解:https://developer.mozilla.org/zh-CN/docs/Web/API/Event

TTI

含义

TTI,全称 Time To Interactive ,翻译为 可交互时间 ,指的是应用在视觉上都已渲染出了,完全可以响应用户的输入了。是衡量应用加载所需时间并能够快速响应用户交互的指标

统计逻辑

与 FMP 相同,很难规范化适用于所有网页的 TTI 指标定义。

统计方式一:谷歌实验室写的npm包,tti-polyfill

import ttiPolyfill from 'tti-polyfill';

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  ga('send', 'event', {
    eventCategory:'Performance Metrics',
    eventAction:'TTI',
    eventValue: tti,
    nonInteraction: true,
  });
});

统计方式二:在页面加载的一定时间内(如前50s内),以(domContentLoadedEventStart-navigationStart)+5为起始点,循环寻找,找到一个5s的窗口,其中网络请求不超过2个且没有长任务(>50ms),再找到该5秒窗口之前的最后一个长任务,该长任务结束的时间点就是可稳定交互时间。其中长任务可自定义时间或通 performance.getEntriesByType('long-task') 获取

// 以下代码仅代表思路
const basicTime = 5000;

function getTTITime(startTime,longTaskEntries, resourceEntries,domContentLoadedTime) {

  let busyNetworkInWindow = [];
  let tti = startTime;

  while (startTime + basicTime <= 50000) { //从前50s 中去找
    tti = startTime;
    longTasksInWindow = longTaskEntries.filter(task => {
      return task.startTime < startTime + basicTime && task.startTime + task.duration > startTime;
    });
    if (longTasksInWindow.length) {
      const lastLongTask = longTasksInWindow[longTasksInWindow.length - 1];
      startTime = lastLongTask.startTime + lastLongTask.duration;
      continue;
    }
    busyNetworkInWindow = resourceEntries.filter(request => {
      return !(request.startTime >= startTime + basicTime || request.startTime + request.duration <= startTime);
    });
    if (busyNetworkInWindow.length > 2) {
      const firstRequest = busyNetworkInWindow[0];
      startTime = firstRequest.startTime + firstRequest.duration;
      continue;
    }
    return Math.max(tti, domContentLoadedTime);
  }
  return Math.max(tti, domContentLoadedTime);
}

FCI

含义

FCI,全称 First CPU Idle ,翻译为 首次CPU空闲时间 代表着一个网页已经满足了最小程度的与用户发生交互行为的时刻。当我们打开一个网页,我们并不需要等到一个网页完全加载好了,每一个元素都已经完成了渲染,然后再去与网页进行交互行为。网页满足了我们基本的交互的时间点是衡量网页性能的一个重要指标。

统计逻辑

FCI为在FMP之后,首次在一定窗口时间内没有长任务发生的那一时刻,并且如果这个时间点早于DOMContentLoaded时间,那么FCI的时间为DOMContentLoaded时间,窗口时间的计算函数可以根据Lighthouse提供的计算公式 N = f(t) = 4 * e^(-0.045 * t) + 1 进行自定义设计

FPS

含义

FPS,全称 Frames Per Second ,翻译为 每秒帧率 ,表示的是每秒钟画面更新次数,当今大多数设备的屏幕刷新率都是60次/秒。

参考标准:

  • 帧率能够达到 50 ~ 60 FPS 的动画将会相当流畅,让人倍感舒适;

  • 帧率在 30 ~ 50 FPS 之间的动画,因各人敏感程度不同,舒适度因人而异;

  • 帧率在 30 FPS 以下的动画,让人感觉到明显的卡顿和不适感;

  • 帧率波动很大的动画,亦会使人感觉到卡顿

统计逻辑

利用 requestAnimationFrame ,循环调用,当now大于lastTime+1S时,计算FPS。若小于某个阀值则可以认为当前帧率较差,若连续小于多个阀值,则停止统计,当前页面处于卡顿状态,进入卡顿处理逻辑

更多具体参考:

  • https://www.cnblogs.com/coco1s/p/8029582.html

设备信息

window.navigator.userAgent 中可以获取用户设备信息,如图:

前端性能优化之谈谈常见的性能指标及上报策略

window.navigator.connection 中可以获取设备网络信息,如:

前端性能优化之谈谈常见的性能指标及上报策略 window.devicePixelRatio 可以获取设备像素比。

上报策略

pv/uv

监听各种页面切换的情况;SPA页面,可以监听hashChange

性能数据/设备信息/网络状况

  • 在页面离开前上报,beforeUnload/visibilitychange/pagehide…+sendBeancon/Ajax

  • img 标签+切片+压缩

总结

用图说话,本文内容,整理到了一张图上。

前端性能优化之谈谈常见的性能指标及上报策略

参考资料

  • https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics?hl=zh-cn

  • https://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

  • https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

  • https://javascript.ruanyifeng.com/dom/mutationobserver.html

  • https://developer.mozilla.org/zh-CN/docs/Web/API/Event

  • https://www.cnblogs.com/coco1s/p/8029582.html

原创不易,点个 在看 支持我吧


以上所述就是小编给大家介绍的《前端性能优化之谈谈常见的性能指标及上报策略》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机程序设计艺术(第1卷)

计算机程序设计艺术(第1卷)

[美] Donald E. Knuth / 清华大学出版社 / 2002-9 / 80.00元

第1卷首先介绍编程的基本概念和技术,然后详细讲解信息结构方面的内容,包括信息在计算机内部的表示方法、数据元素之间的结构关系,以及有效的信息处理方法。此外,书中还描述了编程在模拟、数值方法、符号计算、软件与系统设计等方面的初级应用。此第3版增加了数十项简单但重要的算法和技术,并根据当前研究发展趋势在数学预备知识方面做了大量修改。一起来看看 《计算机程序设计艺术(第1卷)》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具