性能指标

几个关键词

在开始深入了解性能监控之前，应该要关注以下几个问题：

• “它正在运行吗？”

• 我的网页浏览开始了吗（服务器有回应，等等）？

• “它有用吗？”

• 页面上是否有足够关键的内容使我能够理解？

• “它可以使用了吗？”

• 我能不能和页面互动了呢？还是它依旧处于加载状态？

• “用户体验良好吗？”

• 是否没有滚动卡顿、动画卡顿、无样式内容闪烁和缓慢的 Web 字体文件加载等问题出现，让我感到惊喜？

让我们想一想，哪些指标可以回答这些问题？

FP (First Paint)

这个指标表示页面绘制的时间点，换句话说它表示当用户第一次看到白屏的时间点.

参考 w3c/paint-timing

FCP (First Contentful Paint)

这是当用户看见一些“内容”元素被绘制在页面上的时间点。和白屏是不一样的，它可以是文本的首次出现，或者 SVG 的首次出现，或者 Canvas 的首次出现等等。

FCP 可以用来回答，“它运行了吗？”

FCP 事件在文本（正在等待字体文件加载的文本不计算在内）、图片、Canvas 等元素绘制期间就已经被触发了。因此，FP 和 FCP 的时间差异可能从几毫秒到几秒不等。这个差别甚至可以从上面的图片中看出来。这就是为什么用一个指标来表示真实的首次内容绘制是有价值的。

FMP （First Meaningful Paint）

FMP 可以用来回答，“它有用吗？”

有意义的内容指什么？比如：

• 博客的标题和文本

• 搜索引擎的搜索文本

• 对于电子商务产品来说重要的图片

但是下面的内容则不属于有意义的内容：

• 下拉菜单或类似的东西

• 无样式内容闪烁（FOUC）

• 导航条或页面标题

如果主要内容很久都没有展示出来，可能是因为太多资源（图片、样式、字体、JavaScript）有较高的加载优先级，阻塞了 FMP

Visually Ready (视觉上已经加载完成)

当页面看上去“接近”加载完成，但浏览器还没有执行完所有脚本文件的状态，比如此时还有异步脚本、link import 加载的样式表、字体文件、预加载/懒加载的图片文件。

First Interactive

简单来说，就是 DOMContentLoaded

Visually Complete

这个时间也是用来回答问题 - 用户体验良好吗？