前端面试题宝典

性能优化系列：常见性能指标

简介：我们之前也分享过很多做页面性能优化的方法，但对于工作年限长一些的同学来说，面试时如果能对“优化效果”进行量化，能大大增加面试官对你的好感。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

大家好，我是雷布斯。

相信大家在面试的时候，都遇到过性能优化相关的问题，比如“常用的性能优化手段有些？”，“你的页面优化效果怎么样？”，“你的页面指标是怎么统计的？”。

大家都知道，性能优化的目的，就是为了提供给用户更好的体验，这些体验包含这几个方面：展示更快、交互响应快、页面无卡顿情况等等。

我们之前也分享过很多做页面性能优化的方法，但对于工作年限长一些的同学来说，面试时如果能对“优化效果”进行量化，能大大增加面试官对你的好感。

今天要介绍系列文章中的第一篇：前端性能指标。

前端性能指标是可量化的属性，从客户端角度评估 Web 应用程序和网页的效率、有效性和整体用户体验。

性能指标

用户角度的性能指标

从用户角度来看，性能指标一般有：

  • First Paint 首次绘制（FP）

这个指标用于记录页面第一次绘制像素的时间，如显示页面背景色。

FP 不包含默认背景绘制，但包含非默认的背景绘制。

  • First contentful paint 首次内容绘制 (FCP)

测量第一个元素（文本、图像或画布）在屏幕上渲染所需的时间。

FCP 是感知加载速度的关键指标，对用户满意度有重大影响。

  • Largest contentful paint 最大内容绘制 (LCP)

LCP 用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。

官方推荐的时间区间，在 2.5 秒内表示体验优秀。

  • Time to Interactive 可交互时间 (TTI)

首次可交互时间，TTI（Time to Interactive）。

这个指标计算过程略微复杂，它需要满足以下几个条件：

  1. 从 FCP 指标后开始计算
  2. 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
  3. 往前回溯至 5 秒前的最后一个长任务结束的时间

对于用户交互（比如点击事件），推荐的响应时间是 100ms 以内。那么为了达成这个目标，推荐在空闲时间里执行任务不超过 50ms（ W3C 也有这样的标准规定），这样能在用户无感知的情况下响应用户的交互，否则就会造成延迟感。

  • First input delay 首次输入延迟 (FID)

首次输入延迟，FID 记录在 FCP 和 TTI 之间，用户首次与页面交互时响应的延迟。

  • Total blocking time 总阻塞时间 (TBT)

阻塞总时间，TBT录在 FCP 到 TTI 之间所有长任务的阻塞时间总和。

  • Cumulative layout shift 累积布局偏移 (CLS)

累计位移偏移，CLS，记录了页面上非预期的位移波动。

页面渲染过程中突然插入一张巨大的图片或者说点击了某个按钮突然动态插入了一块内容等等相当影响用户体验的网站。

这个指标就是为这种情况而生的，计算方式为：

位移影响的面积 * 位移距离。

三大核心网页指标（Core Web Vitals）

根据 Google 官方的说法，Core web vitals 是长期下来根据大量使用者体验所制定的指标。

这三项指标分别对网站载入速度(LCP)、可开始互动的时间(FID)、以及页面稳定性(CLS) 进行评分。

三大核心指标及评分标准：

大家可能对上述的指标描述缺乏认知，其实以某个页面的加载过程为例，这三个指标所代表的时间节点如下：

前端角度的监控指标

对于前端同学来说，我们一般对以下指标的提法比较多，其实这与用户角度的监控指标也是有重叠的：

  • 白屏时间: 从打开网站到有内容渲染出来的时间节点
  • 首屏时间: 首屏内容渲染完毕的时间节点
  • domReady 时间: 用户可操作的时间节点
  • onLoad 时间: 总下载时间

那么我们如何快速统计这些指标呢？

Performace 是 HTML5 的新特性之一，该接口会返回当前页面性能相关的信息。

Performance 对象一共提供了4个属性：

  • navigation: 包含页面加载、刷新、重定向情况
  • timing: 包含了各种与浏览器性能有关的时间数据
  • memory: 返回JavaScript对内存的占用
  • timeOrigin: 返回性能测量开始时的时间的高精度时间戳

我们可以直接基于 Performance 的 timing 对象，获取不少统计指标。

其中常用的几项计算指标如下：

const timing = performance.timing;
const times = {};

 // 请求耗时
times.request = timing.responseEnd - timing.requestStart || 0;

// 页面白屏时间
times.ttfb = timing.responseStart - timing.navigationStart || 0;

// 页面可操作时间
times.domReady = timing.domComplete - timing.responseEnd || 0;

//dom渲染时间
times.domRender = timing.domContentLoadedEventEnd - timing.navigationStart || 0,

// 总下载时间
times.onload = timing.loadEventEnd - timing.navigationStart || 0;

// DNS解析时间
times.lookupDomain = timing.domainLookupEnd - timing.domainLookupStart || 0;

// TCP建立时间
times.tcp = timing.connectEnd - timing.connectStart || 0,

// 首屏时间
times.now = performance.now();

最后

今天我们介绍了常见的性能指标，以及基于 Performance 的 timing 对象如何计算部分指标，我会在之后的系列文章中，陆续介绍性能数据的收集方式及优化方案。

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果最近最近准备或者正在找工作，千万不要错过，我们的题库主打无广告和更新快哦~。

老规矩，也给我们团队的辅导服务打个广告。