前端如何查看页面性能

现在讲的最多的就是前端性能优化，手段五花八门，但是首先怎么量化优化的效果，首屏从10s 优化的1s ，怎么查看？

前端性能最简单的量化指标，白屏时间，首屏时间。

白屏时间网上互相参考的，都是从html head 处打点减去 performance.timing.navigationStart（上一个页面路有关闭，新路有开启开始时间）,

白屏时间 = firstPaint - performance.timing.navigationStart

但是当前的前端系统，大多是基于 vue /react 的spa ，正常情况下你的html应该是这样的

html会加载一系列的js 文件，生成虚拟dom ，再去在head 里面打点作为首次渲染的时间，已经产生很大的失真

作为前端调试，Chrome可以利用更便捷的插件，lighthouse

lighthouse 能自动生成报告，主要有以下6各指标：

FCP：
FCP(Fisrt Contentful Paint)：这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。

TTI:

TTI(Time to Interactive)：这个表示首次可交互可流畅的交互时间，这个时间有几个特点：位于FCP之后,并且5秒内无长任务(大于50ms)的执行。

其实这个指标和FCP一样都很重要，FCP可能意味着我们的页面开始渲染，即使渲染出页面不代表可以交互了，很多的时候我们的页面渲染出来了，但是会比较的卡顿

Speed Index：

速度指数衡量的是内容在页面加载过程中的视觉显示速度。Lighthouse首先会在浏览器中捕获一段页面加载的视频，并计算出各帧之间的视觉进度。

TBT

TBT(Total Blocking Time)：表示从FCP到TTI阶段中长任务总阻塞时间

上图表示主线程所做的任务时间线，其中任务分为长任务和短任务（长短任务的依据为执行时间是否大于50ms）

那么超过50ms的地方实际上就是阻塞时间，那上面实际上阻塞时间就是345ms。当然阻塞导致浏览器无法中断正在进行的任务，从而使得用户无法立即进行交互，从而影响体验。

LCP:

LCP(Largest Contentful Paint):表示页面最大的内容绘制。该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止

CLS:

CLS(Cumulative Layout Shift)：表示页面累计位移偏移。页面内容的意外移动通常是由于异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。

我们主要关注的, 指标：
首次显示渲染元素的白屏时间： FCP
首屏全部渲染的首屏时间：LCP 是 FSP 的近似值；