原则

说明

第一次原则

指用户在第一次打开应用时，以更快的速率获得自己想要的内容。

持续性原则

指在用户使用应用过程中，没有卡顿的获得自己想要的内容。

性能指标

说明

First Contentful Paint (FCP)

“第一次内容绘制”，也就是指用户从打开应用到肉眼可以看到界面上第一次呈现出内容的时间。这里的内容可以上任何界面呈现，文本、图片、视频等等。

通过FCP这个指标，可以反映用户对应用打开速度的感知程度。FCP越小，说明用户能够感知你的应用打开速度更快，对你的应用竖起大拇指。

Largest Contentful Paint(LCP)

“最大块内容首次绘制”，也就是从你的应用打开，到全部内容加载完成之前，这一段时间里面，界面上最大的一块内容在什么时间点上被完整渲染出来。LCP是一个动态的评价过程，因为当界面没有加载完之前，你也说不准到底哪一块才是界面上最大的一块内容。

LCP从另外一个角度去评价了应用的打开速度，因为即使FCP很快，但如果LCP慢的话，仍然意味着你的应用体验不佳。

First Input Delay(FID)

“第一次输入延迟”，即用户第一次在界面上进行操作（例如点击某个链接）到程序对这个操作做出回应的延迟。这是因为经常我们的应用需要通过网络请求脚本或数据来进行渲染，而在请求的过程中，我们的程序或者浏览器本身，无法响应用户的操作，这个无法响应的过程，就是FID。例如某些点击我们通过脚本中的事件监听来处理，但是此时脚本还在加载过程中，所以点击就没有任何效果。下图中，黄色条代表主线程中正在执行的某个任务，如果用户在这个任务的执行过程中进行了某次输入，那么浏览器是无法响应的，它必须等到这个任务结束才能响应。

FID 只关注来自离散操作的输入事件，如单击事件、按键事件, 像滚动和缩放这样的连续交互动作是不考虑的。

FID实际上反映了你的应用从打开之后阻塞用户进行交互的时间，因此是一个非常重要的负面指标。

Time to Interactive(TTI)

“达到可稳定交互的时间”，假如你不做任何输入，让应用自己打开，知道整个应用没有发生任何动作（静默状态）持续5秒钟，那么在这5秒钟之前的那一次长任务的结束时间，就是TTI。下图中黄条是长任务，和FID示意图中的黄条意思相同。当加载达到稳定静默状态（没有黄条）5秒钟后，往前找到最后一个长任务的结束时间，这个时间就是TTI。

Total Blocking Time(TBT)

“总阻塞时长”，长任务执行会阻塞界面的渲染，有的卡顿明显，有的不明显，在FCP到TTI之间，这些长任务的阻塞时长的总和，就是TBT。下图中黄红块就是长任务，红色就是阻塞时长，红色部分的总和就是TBT

Cumulative Layout Shift(CLS)

“累计布局偏移”，它是一个比值。在应用界面加载过程中，可见元素在前后两帧之间存在布局上的偏移，那么认为这个元素是不稳定的，比如用户准备用鼠标去点这个元素，结果点击点时候，这个元素被另外一个元素顶开了，导致点错了元素。CLS就是收集一段时间内这些偏移的数据。它的初衷是衡量页面元素在布局层面的稳定性，如果你的应用元素在布局上跑来跑去，体验当然是不好的。

Frame Per Second(FPS)

“每秒帧数”，它是一个速度指标“帧率”，即在每秒内刷新了多少帧。我们都知道浏览器会根据应用的变化来按照一定的帧率刷新页面，但是浏览器的刷新和电脑屏幕的刷新是两件事，电脑屏幕按照固定的刷新率进行刷新，而浏览器则是按照一定的（不稳定的）频率进行整个可视窗口的绘制。浏览器的绘制受多方面的影响，理论上在没有任何影响下，浏览器的帧率60Hz，即16.6ms左右一帧，但是由于浏览器执行时存在一些资源调度逻辑，需要等某些执行任务完成之后，才能进入下一帧刷新，这也就导致了丢帧现象，我们都知道人肉眼可辨为0.1s每帧，超过这个时长就会感觉卡顿，所以通过FPS指标来衡量应用的性能也是非常重要的。