FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.
FCP (First Contentful Paint) 首次内容绘制 标记浏览器渲染来自 DOM 第一位内容的时间点,该内容可能是文本、图像、SVG 甚至 元素.
LCP (Largest Contentful Paint) 最大内容渲染: 代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)
DCL (DomContentloaded): 当 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,无需等待样式表、图像和子框架的完成加载.
FMP(First Meaningful Paint) 首次有效绘制:详情https://www.cnblogs.com/chris-oil/p/14519111.html
L (onLoad), 当依赖的资源, 全部加载完毕之后才会触发
TTI (Time to Interactive) 可交互时间`: 指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点.
TBT (Total Blocking Time) 页面阻塞总时长: TBT汇总所有加载过程中阻塞用户操作的时长,在FCP和TTI之间任何long task中阻塞部分都会被汇总
在主线程上运行任务所花费的总时间为560毫秒,但只有345(200 + 40 + 105)毫秒的时间被视为阻塞时间(超过50ms的Task都会被记录).
image.png
-------------------------------------------------------------------------------------------------------------------------------------------------------FID (First Input Delay) 首次输入延迟: 指标衡量的是从用户首次与您的网站进行交互(即当他们单击链接,点击按钮等)到浏览器实际能够访问之间的时间, 下面来张图来解释FID和TTI的区别:
image.png
CLS (Cumulative Layout Shift) 累积布局偏移:总结起来就是一个元素初始时和其hidden之间的任何时间如果元素偏移了, 则会被计算进去
可见视频实例 https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm
SI (Speed Index): 指标用于显示页面可见部分的显示速度, 单位是时间
-------------------------------------------------------------------------------------------------------------------------------------------------------参考https://blog.csdn.net/c_kite/article/details/104237256#FP_First_Paint___9
网友评论