HOW

Performance API为我们提供了精确的事件触发时间点。从网络到DOM构建，我们能清除的知道每个过程花费了多少时间，这让我们追踪性能最大消耗方便了很多。

下图为部分记录字段所代表的时间点：

一些术语

FP/FCP

first-paint/first-content-paint
在DOM解析完毕后，开始绘制的时间点。

FP 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点。 相比而言，FCP 标记的是浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 <canvas> 元素。

FMP

首次有效绘制 (FMP)

网页的这些“最重要部分”通常称为主角元素。 例如，在 YouTube 观看页面上，主视频就是主角元素。 在 Twitter 上，主角元素可能是通知标志和第一篇推文。 在天气应用上，主角元素是指定地点的天气预测。 在新闻网站上，主角元素可能是重大新闻和置顶大图。

在网页上，几乎总有一部分内容比其他部分更重要。 如果页面最重要的部分能迅速加载，用户可能不会注意到其余部分是否加载。

TTI

可交互时间 (TTI) 指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。 应用可能会因为多种原因而无法响应用户输入：

• 页面组件运行所需的 JavaScript 尚未加载。
• 耗时较长的任务阻塞主线程。
  TTI 指标可识别页面初始 JavaScript 已加载且主线程处于空闲状态（没有耗时较长的任务）的时间点。

getEntriesByType

该方法接受一个类型参数entryType，并返回响应的时间线对象。

这里的类型包括：
frame, navigation, resource, paint, mark, measure

其中mark, measure为我们手动设置的测量点。而我们若要了解文档的加载性能，则frame, navigation, resource, paint为我们重点关注的类型。

performance.getEntriesByType(“navigation”)

navigation类型和文档的加载相关，该方法返回了一个数组[PerformanceNavigationTiming]。

而PerformanceNavigationTiming类的具体属性含义： MDN - PerformanceNavigationTiming

更加详细的解释：Google - Assessing Loading Performance in Real Life with Navigation and Resource Timing

兼容性：IE/Safari/Safari on iOS 不支持