一些关键指标

首先来看下图——

1）FP (First Paint) and FCP (First Contentful Paint)

分别代表页面首次渲染和首次有内容的渲染。
这两个指标浏览器已经标准化了，从 Performance 的 The Paint Timing API 可以获取到，一般来说两个时间相同。

Performance是前端性能监控的API。它可以检测页面中的性能，W3C性能小组引入进来的一个新的API，它可以检测到白屏时间、首屏时间、用户可操作的时间节点，页面总下载的时间、DNS查询的时间、TCP链接的时间等。可以参考博客介绍：Performance --- 前端性能监控 - 龙恩0707 - 博客园 (cnblogs.com)

2）FMP (First Meaningful Paint)

代表首次有意义的渲染。
我们假设当一个网页的 DOM 结构发生剧烈的变化的时候，就是这个网页主要内容出现的时候，那么在这样的一个时间点上，就是首次有意义的渲染。
（关于“网页主要内容”的定义，暂无统一规范。）

3) TTI (Time to interactive)

代表页面可交互时间，即从页面加载开始到页面处于完全可交互状态所花费的时间。

页面的完全可交互状态：

页面已经显示有用内容。

页面上的可见元素关联的事件响应函数已经完成注册。

主线程任务响应不超过50毫秒

4）DNS (Domain Name System)解析耗时

DNS又叫域名系统，作用是把域名解析为IP地址，从而实现网页访问。

DNS解析耗时 = domainLookupEnd - domainLookupStart

5）DOM Ready

代表页面解析完成的时间。
这里的解析至少应该包括以下操作：HTML文档分析以及DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，但是不包括图片、iframe等其它资源的加载。正因为如此，该事件触发的时机一般比window.onload要早，而且是在所有DOM元素都可以操作之时。

DOM Ready的计算： Time To Dom Ready = TTSR + TTDC + TTST

其中：
TTSR(Time To Start Render)：浏览器开始渲染的时间
TTDC(Time To Dom Created)：DOM树创建所耗时间
TTST(Time To Script)：BODY中所有脚本加载和执行的时间

通过以上公式可以看到Start Render主要受以下因素影响(开发人员可控)：
(1) DOM结构的复杂程度
(2) BODY中脚本使用情况

通过对一些实际监控数据的分析得出，在一个通过正常方式加载脚本的页面中，脚本的加载和执行时间往往能占DOM Ready时间的50%左右，由此可见脚本的使用对DOM Ready指标的影响如何的显著！因此，对DOM Ready指标的优化也应该着重从脚本的使用入手。

前端性能指标分析-Start Render、DOM Ready、Page Load、TTI - 摩帆士 - 博客园 (cnblogs.com)

性能衡量

对于所有的性能指标，耗时越短，用户的体验就越好。

计算各指标：可以直接借助浏览器为我们提供的window.performance接口来获取与性能相关的参数，从而利用公式来计算大佬已经帮我们整理了一部分：(73条消息) 一文彻底搞懂前端监控_前端点线面的博客-CSDN博客

前端-性能指标 | 青训营笔记