关于浏览器渲染以及性能优化的一些概念

Load事件：整个页面被加载，包括依赖的资源，如样式文件、图片
DomContentLoaded: 初始的html文件被加载解析，不包括样式文件、图片、子框架等

---

FCP: First Contentful Paint

从导航到第一块DOM呈现

---

FMP: First Meaningful Paint

从导航到主要内容呈现
一般FMP计算可以这么找：当布局发生最大变化时，意味着FMP出现了。也就是说新出现的渲染对象最多。
对于长页面（有折叠，或者说页面底部需要通过滑动才可见），可以这么寻找：新出现的渲染对象数目／max(1, 页面高度／屏幕高度)
对于文字较多的页面，字体的下载可能会延长FMP
同样，对于以图片为主要内容的页面，如电商网站，图片的加载也会延长FMP
有些时候，FCP和FMP是一致的，但是当页面有iframe时，FMP应包括iframe中内容渲染，但是FCP不包含。

---

FCI: First CPU Idle

早先被称为First Interactive
从页面开始导航，到页面可以进行最小的交互
找寻方法：从FMP开始，沿着时间线推进寻找，找到一个没有长任务的静默的5s窗口,在这5s内，没有任何任务。再沿着这个窗口的起始点倒推，选找到第一个长任务，这个长任务的结束时间点就是FCI

---

TTI：Time to Interactive

早先被称为Time to Consistently Interactive
从导航，到CPU能有5s静默
找寻方法：从FMP开始，沿着时间线推进寻找，找到一个CPU和主线程都静默的5s窗口,再沿着这个窗口的起始点倒推，选找到第一个长任务，这个长任务的结束时间点就是TTI的点

---

参考资料

FCP定义

FMP计算

各指标

First Interactive && Consistently Interactive