性能分析工具和 Performance API

本文详细介绍了前端性能分析工具灯塔(Lighthouse)的各项关键指标,如FCP、LCP、TBT、CLS等,并解释了它们的含义。同时,文章还探讨了Performance API在分析网站性能上的应用,包括窗口性能对象的各个属性及其在测量页面加载阶段性能的作用。
摘要由CSDN通过智能技术生成

灯塔(lighthouse)指标详解

1.Performance(性能)

First Contentful Paint(FCP):衡量页面开始加载到页面中第一个元素被渲染之间的时间。元素包含文本、图片、canvas等。
Speed Index:代表页面内容渲染所消耗的时间,该值越低越好。
Largest Contentful Paint(LCP):衡量标准视口内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素。
Time to Interactive(TTL):测量页面所有资源加载成功并能够可靠地快速响应用户输入的时间,即互动时间。
Total Blocking Time(TBT):这是 FCP 与 TTL 之间的所有时间段的总和。
Cumulative Layout Shift (CLS):衡量视觉稳定性,为了提供良好的用户体验,页面的CLS应保持小于 0.1。

2.Accessibility(可访问性)

无障碍功能:
当我们说某个网站具有无障碍功能时,我们的意思是网站的内容可用,其功能可由任何人操作。所有用户都能看见和使用键盘、鼠标或触摸屏,并且与网页内容的交互方式也清晰明了。这会让使用者获得良好的体验。我们在探讨无障碍功能时往往是围绕身体有缺陷的用户,
在这里插入图片描述

性能名词解释

官网解释

FCP (First Contentful Paint)

首次内容绘制 标记浏览器渲染来自 DOM 第一位内容的时间点,该内容可能是文本、图像、SVG 甚至 元素. 网站应该努力将首次内容绘制控制在1.8 秒或以内
FCP 发生在第二帧,因为那是首批文本和图像元素在屏幕上完成渲染的时间
在这里插入图片描述

虽然部分内容已完成渲染,但并非所有内容都已经完成渲染。这是首次内容绘制 (FCP) 与Largest Contentful Paint 最大内容绘制 (LCP)(旨在测量页面的主要内

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值