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的点
参考资料
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。