dev tools的使用

wythhhhh

已于 2025-07-21 17:36:00 修改

阅读量534

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端

于 2025-07-21 17:35:42 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wythhhhh/article/details/149493998

文章目录

dev tools相关链接

名词解释

缩写	英文全称	中文含义	说明
FCP	First Contentful Paint	首次内容绘制	页面开始显示任何内容（文字、图片等）的时间点。
FP	First Paint	首次绘制	浏览器首次开始绘制任何像素的时间点（比FCP更早）。
LCP	Largest Contentful Paint	最大内容绘制	页面主视口内最大内容元素完成渲染的时间，反映主要内容加载完成。
FID	First Input Delay	首次输入延迟	用户首次交互（点击、输入）到浏览器响应的延迟时间。
CLS	Cumulative Layout Shift	累积布局偏移	页面视觉稳定性指标，衡量页面加载过程中元素的移动造成的布局偏移。
TTFB	Time To First Byte	首字节时间	浏览器接收到第一个字节响应数据的时间，反映服务器响应速度。
DCL	DOMContentLoaded	DOM内容加载完成事件	DOM 解析完成，不含图片样式等资源加载完成。
Load	Load Event	页面加载完成事件	页面所有资源（包括图片、样式等）加载完成的时间。
FPS	Frames Per Second	每秒帧数	动画或滚动时每秒渲染的帧数，反映页面动画流畅度。
TTI	Time To Interactive	可交互时间	页面首次可交互的时间，用户可以开始正常操作。
SI	Speed Index	速度指数	页面内容视觉完成的速度，越小越好。

FCP 和 FP：FP 是更早的绘制时间，FCP 更侧重内容元素。
CLS：越低越好，理想值 < 0.1。
FID：越低越好，理想值 < 100ms。
TTFB：反映服务器响应，理想值 < 200ms。

缩写	英文全称	中文含义	说明</

最低0.47元/天解锁文章

200万优质内容无限畅学

博客等级

码龄7年

34
原创

190
点赞

264
收藏

131
粉丝

关注

私信

热门文章

分类专栏

http 3篇
js 10篇
面试 7篇
css 3篇
vue 4篇
操作
chatGPT面试题 2篇
webpack 1篇

展开全部收起

上一篇：: http相关知识

最新评论

css相关
CSDN-Ada助手: 哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)提升标题与正文的相关性。
Promise
CSDN-Ada助手: 恭喜你写出了这篇关于Promise的博客！持续创作是非常不易的，你的努力和执着一定会有所回报。接下来，我建议你可以继续深入学习Promise的相关知识，例如它的使用场景和一些高级技巧。期待你的下一篇博客！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply7 看奖励名单。
Promise
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 如何入门Python: https://activity.csdn.net/creatActivity?id=10436?utm_source=csdn_ai_ada_redpacket 全国科技者工作日—为创新和未来而努力: https://activity.csdn.net/creatActivity?id=10443?utm_source=csdn_ai_ada_redpacket 无效数据，你会怎么处理？: https://activity.csdn.net/creatActivity?id=10423?utm_source=csdn_ai_ada_redpacket 全部创作活动: https://mp.csdn.net/mp_blog/manage/creative?utm_source=csdn_ai_ada_redpacket

大家在看

最新文章

目录

展开全部

收起

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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