美文网首页
Chrome Performance常见名词(FP, FCP,

Chrome Performance常见名词(FP, FCP,

作者: DD丿 | 来源:发表于2021-09-29 11:28 被阅读0次

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

相关文章

  • Chrome Performance常见名词(FP, FCP,

    FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点. FC...

  • FP FCP

    FP,全称 First Paint,翻译为首次绘制,是时间线上的第一个时间点,它代表网页的第一个像素渲染到屏幕上所...

  • 前端性能优化大纲

    性能指标 FP (First Paint) 首次绘制FCP (First Contentful Paint) 首次...

  • 前端性能指标

    FP 首次绘制 FCP 首次内容绘制 FMP 首次有效绘制 TTI 可交互时间

  • 性能指标

    FP First Paint 首次绘制 performance.getEntriesByType('paint')...

  • 前端注意和vue注意

    spa单页面应用 加载过程 FP :首次渲染绘制FCP :首次内容绘制FMP :首次有效绘制 === html*...

  • FP6606AC双快充协议IC,FP6606C单C口快充协议IC

    共享快充充电协议IC: FP6601AA,USB口:A+A 共享QC QC3.0/2.0,AFC,FCP,appl...

  • Chrome performance

    打开开发者工具,进入performance板块 → esc → 在下面空白区域输入代码 → record (...

  • chrome performance

    一、缩略图 1、FPS,表示每一秒的帧数,用来衡量页面动画的性能指标。fps图中绿色柱状越高表示体验越好。若出现红...

  • chrome调试-性能分析performance篇

    1、performance页面性能分析 本文将介绍如何使用chrome devTool的performance来对...

网友评论

      本文标题:Chrome Performance常见名词(FP, FCP,

      本文链接:https://www.haomeiwen.com/subject/lbqjnltx.html