Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)

最新推荐文章于 2025-07-14 19:02:12 发布
最新推荐文章于 2025-07-14 19:02:12 发布
阅读量2.4w 收藏 49
点赞数 12
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_kite/article/details/104237256

在这里插入图片描述
之前整理过一份分析Performance的博文: 利用Performance API分析网站性能

这次还是拿CSDN的performance来举例说明, 这几个名词的含义, 供自己遗忘和不会的同学方便查看

文章目录

FP (First Paint) 首次绘制

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

FCP (First Contentful Paint) 首次内容绘制

FCP (First Contentful Paint) 首次内容绘制 标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素.

LCP (Largest Contentful Paint) 最大内容渲染

LCP (Largest Contentful Paint) 最大内容渲染: 代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)

最低0.47元/天 解锁文章

新学期VIP享超值加赠
页面视觉稳定性之优化CLS
找到Web
08-30 2006
最常见的影响CLS的分数的有： 未指定尺寸的图片 未指定尺寸的广告、嵌入元素、iframe 动态插入内容 自定义字体（引发FOIT/FOUT） 在更新DOM之前等待网络响应的操作 未指定尺寸的图片 总而言之：在 <img> 和 <video 标签上始终加上 width 和 height 属性。或者，使用 CSS aspect ratio boxes 来占据空间。这种方法可以确保在图片加载过程中，浏览器可以分配足够的空间。 历史 在web的早期，开发者会给 <img> 标签.
chrome浏览器Performance性能监控火焰图详解
11-07 2733
使用前，我们最好打开Chrome的无痕模式。因为Chrome上一般有着大量的插件，会或多或少的影响页面的性能，所以我们关掉这个来避免对页面性能的影响。我们每一次的UI的变化，都要经历以下步骤：我们都知道像素管道有五步，。人的眼睛大约每秒可以看到 60 帧，那么就代表我们每 16.7ms 就要看到 1 帧，一帧就要经历上图的 5 步，说明我们的每一个任务（task） 不宜过长，这样就会导致用户对于界面感知的不友好性fps 是指页面每秒帧数fps = 60 性能极佳。
网页检测性能指标FCP/LCP/DCL/TTI/FID/CLS/FPS 控制台查看
m0_55715771的博客
05-14 1673
FCP/LCP/DCL/TTI查看：
深入掌握Performance面板与LCP/FCP指标优化指南
最新发布
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
07-14 1168
深入掌握Performance面板与LCP/FCP指标优化指南
前端性能指标：FP、FMP、LCP与CLS详解
天涯学馆
06-13 2535
前端性能指标是衡量网页加载速度、交互流畅度和视觉稳定性的重要依据，对于优化用户体验至关重要。
详解谷歌浏览器 performance 选项卡
热门推荐
杏子
01-16 2万+
本文要点：详细介绍谷歌浏览器 performance 选项卡的各个要素，让你知道如何查看网页性能。
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
pzy_666的博客
02-19 6287
怎么获取到这两个数据 通过chrome开发者工具Performance选项卡 通过chrome开发者工具Lighthouse选项卡 通过JS计算 web-vitals FP & FCP & LCP FP:（First Paint / 首次绘制） 页面第一次绘制像素的时间，实际也是白屏时间 FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间，也就是我们通常要优
浏览器performance各指标解读
qq_45838276的博客
05-18 1497
谷歌浏览器 performance 详解_chrome performance_ywCSD的博客-CSDN博客
FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS
12-29
FP (First Paint) 首次绘制是指浏览器首次将像素渲染到屏幕上的时间点。 FCP (First Contentful Paint) 首次内容绘制是指浏览器首次绘制页面上有实际内容的时间点。 LCP (Largest Contentful Paint) 最大内容渲染...
前端开发基于Chrome Performance工具的页面性能监控与优化：核心指标分析及问题定位方法
07-04
文章列举了多个核心性能指标（FP、FCP、LCP、DCL、TTI、SI、TBT、CLS），并针对每个指标提出了优化建议。此外，文章还介绍了如何使用Chrome Performance工具进行性能监控，包括开启和停止记录、刷新页面、解读报告等...
perfume.js:Web性能库，用于测量所有以用户为中心的性能指标
04-13
Page Speed是一项功能，要实现它，我们需要了解许多因素和基本限制。 如果我们可以衡量它，我们就可以改进它。 English || | 为什么选择Perfume.js？... 第一种有意思的涂料（ FCP ） 最大的满意涂料
learn-F12 Performance（性能）前端性能分析(LCP,CLS,INP)
岂不闻
11-12 835
F12 Performance（性能）前端性能分析(LCP,CLS,INP)
Chrome浏览器性能面板--performance
weixin_41949144的博客
05-08 861
Chrome浏览器有performance面板，可以监控一段时间内浏览器运行性能 js heap 为js堆内存，可用于查看是否存在内存泄漏的情况， 锯齿状为每次垃圾回收机制触发后的效果，整体趋于水平即不存在内存泄漏的情况，若蓝线上行则出现了内存泄漏，需要检查代码，否则浏览器运行一段时间后会由于内存不够，出现卡顿，进而崩溃。 ...
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等
知之为知之，不知为不知
05-05 7400
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等；加载性能指标、可交互时间、稳定性指标、流畅性指标
FP、FCP、FMP、LCP都是什么P？
doomliu的博客
05-15 1万+
1. 简介 面试中经常问到前端性能监控相关指标，你知道FP、FCP、FMP、LCP代表什么事件吗？它们的先后顺序如何呢？如何计算？前端性能监控中常用哪些指标？ 本文将介绍前端项目中常用到的性能指标和它们的计算方法以及实际应用场景。 最初，评价前端页面加载性能有两个指标：DOMContentLoaded和load事件，分别代表DOM构造完成和首屏资源加载完成。 对于之前的页面和现代的服务端渲染的页面，这两个指标都可以很好地衡量首屏内容展示时间。但对于现代复杂的单页应用，都是通过JS操作DOM向页面添加主要内容
一文带大家了解前端性能测试所涉及的核心性能指标：LCP、FID、CLS、TBT、TTI、FCP、TTFB
liwenxiang629的博客
08-21 3103
近期工作需要开始从事前端性能测试相关工作，由于之前并没有相关经验，因此耗费了一定的学习成本。本文重点对前端性能测试所涉及的核心指标的含义以及响应时间范围进行了总结，希望对刚刚进入前端性能测试领域的同学有所帮助！这些指标主要依据是 google web vitals。文章非常实用建议大家收藏。
浏览器Performance面板性能监控详解
xiaozr1223的博客
04-21 8033
研背景介绍 1.1 What Chrome DevTools的Performance面板：可以记录和分析页面在运行时的所有活动。 1.2 Why 使用Performance面板解决应用性能瓶颈 为应用的高性能开发提供参考指导价值 1.3 How 如何使用Performance面板查看网页性能 对影响性能的指标进行具体分析 2. 调研计划及过程跟进 2.1环境准备 谷歌浏览器【79.0.3945.117（正式版本）（64 位）】以上 使用快捷键 ctrl + shift + N可进入代码匿名..
使用 Chrome 开发者工具获取网站的 LCP 数据
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-17 532
但是，需要注意的是，由于网络条件、设备性能等因素的影响，同一个网站在不同的环境下的 LCP 时间可能会有所不同。因此，当我们在优化网站性能时，应该尽量在多种条件下进行测试，以确保我们的网站可以在各种环境下都提供良好的用户体验。Largest Contentful Paint（LCP）是一个重要的、用户感知性能的测量指标，它报告了在页面加载过程中，视口内最大可见元素呈现的时间。点击这个按钮，Chrome 就会开始记录你的网站性能。这时，你可以刷新页面，以便让 Chrome 测量从页面加载开始的所有性能指标。
前端性能优化 - 提升 LCP（Largest Contentful Paint）
weixin_47588164的博客
08-24 5258
是一个关键的 Web 性能指标，用于衡量网页的加载性能。具体来说，LCP 是指从用户请求页面开始到页面主体内容（如大图像、视频或大块文本）完全加载并显示在视口中所需的时间。LCP 越短，用户感受到的页面加载速度就越快，这对提升用户体验和页面留存率至关重要。为了获得良好的用户体验，Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化。三个关键指标中其它两个指标是FID（First Input Delay，首次输入延迟）和。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值