前言：最近在复习前端性能监控的知识，指标还是挺多的，整理记录下
1、优化指标有哪些？
1.1、FCP( First Contentful Paint 首次内容渲染时间 ): FCP 是页面首次绘制任何有内容的像素到屏幕上的时间。它反映了页面内容开始呈现的时间点，对用户体验有重要影响，也是是用户体验的重要组成部分
<=1800ms 良好； <=3000ms 需要改进; <3000ms 响应缓慢
1.2、CLS(Cumulative Layout shift 累计布局偏移): CLS 衡量了页面上元素布局变化的累积效果。低的 CLS 表示更稳定的页面布局，有助于提高用户体验。
1.3、FID (First Input Delay 首次输入延迟)： FID 从用户第一次与页面交互（例如单击链接、点击按钮等）到浏览器实际能够响应该交互的时间
输入延迟是因为浏览器的主线程正忙于做其他事情，所以不能响应用户。发生这种情况的一个常见原因是浏览器正忙于解析和执行应用程序加载的大量计算的 JavaScript。
第一次输入延迟通常发生在第一次内容绘制（FCP和可持续交互时间TTI 之间，因为页面已经呈现了一些内容，但还不能可靠地交互）。
1.4、LCP(Largest Contentful Paint 最大内容渲染时间): LCP 表示页面上最大内容块(通常是图片或文本块)绘制到屏幕上的时间。它是评估页面内容加载速度的指标之一
LCP<=2500ms为良好；<=4000ms 需要改进； >4000ms 响应缓慢
1.5、TTI(Time to Interactive 可交互时间): TTI 表示页面变得可交互的时间，即用户可以与页面进行交互的时间点。较短的 TTI 对于提供良好的用户体验至关重要。
LCP<=2500ms为良好；<=4000ms 需要改进； >4000ms 响应缓慢
1.6、FP(First Paint 首次绘制): FP 表示浏览器首次绘制像素到屏幕上的时间，通常是指页面的第一个非白色像素点。它是评估页面渲染速度的重要指标。
1.7、FMP(First Meaningful Paint ): FMP 表示页面首次呈现有意义的内容到屏幕上的时间。它反映了用户认为页面有用的内容何时可见，是用户体验的重要组成部分。
1.8、TTFB(Time to First Byte 加载第一个字节所需时间): TTFB 表示从发出请求到收到第一个字节响应的时间。它是服务器响应速度的度量，较短的 TTFB 通常意味着更快的页面加载速度。
TTFB = 重定向时间 + Service Worker启动时间 + DNS 查找时间 + 连接和TLS协议+请求，直到收到响应的第一个字节为止。
1.9、DCL(DOM Content Loaded DOM内容加载): 标记网页的初始 HTML 文档已完全加载并解析，而不是等待样式表、图片和子帧完成加载的时间点。它通常用于评估页面脚本的加载性能。
1.10、TBT（Total Blocking Time 总阻塞时间）：TBT 衡量在FCP之后主线程被阻塞的时间足以阻止输入响应的总时间，也就是长任务50ms的时间和。如果存在长任务（主线程上运行超过50ms的任务），主线程就被认为是阻塞状态，这时候用户很大概率会注意到延迟，认为网页运行缓慢或已无法加载。
1.11 优化方式
FP/FCP/LCP优化方式：主要优化策略就是通过缓存、预加载、减少请求资源大小等方式加快资源请求速度。
- 压缩文件、使用 Tree-shaking 删除无用代码
- 服务端配置 Gzip 进一步再压缩文件体积
- 资源按需加载
- 通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS
- 内联关键的 CSS 代码
- 使用 CDN 加载资源及 dns-prefetch 预解析 DNS 的 IP 地址
- 对资源使用 preconnect，以便预先进行 IP 解析、TCP 握手、TLS 握手
- 缓存文件，对首屏数据做离线缓存
- 图片优化，包括：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片
- 升级传输协议，如HTTP2.0 HTTP3.0
- 预加载技术： - dns-prefetch - preconnect - prefetch - prerender - preload
FID/TTI优化方式： 都是和用户相关，都是由于长任务堵塞导致的交互延迟，因此优化的重点在于任务相关
- 利用webWorker创建子任务完成复杂的计算
- 借鉴React Fiber的方式，通过拆分任务片，并利用
requestIdleCallback使任务在浏览器空闲时间执行 - 利用
requestAnimationFrame执行动画
CLS优化方式： 和css相关的内容 通过CSS提供预留空位、提前加载可能导致页面内容移动的元素等
- 基于骨架图
- 为图片设置宽高
- 避免动态插入内容
在浏览器性能分析模块下 我们会看到这些性能指标.
2、其他指标:
CPU 和内存使用率: 监测应用程序的 CPU 和内存使用率可以帮助识别性能问题和资源泄漏。
请求次数和大小: 查看页面加载时发出的请求次数和每个请求的大小，以识别优化网络请求的机会。
渲染性能: 监测页面的渲染性能，包括帧率(FPS)和渲染时间，以确保流畅的用户体验。
加载时间: 页面完全加载所需的总时间，包括网络请求、解析、渲染等过程
缓存命中率: 检查缓存命中率，以确定是否有效地使用浏览器缓存来减少请求和加速页面载。
3、Web Vitals
Google 在 2020 年 5 月 5 日提出了新的用户体验量化方式 Web Vitals来衡量网站的用户体验，并将这些衡量结果用作其排名算法的一部分。过去要衡量一个网站的好坏，需要使用的指标太多了。在 Web Vitals 中，Google 确定了三个主要衡量指标：
Largest Contentful Paint (LCP) ：衡量页面主要内容元素渲染完成的时间。为了提供良好的用户体验，LCP应在网页首次开始加载的2.5秒内完成
Interaction to Next Paint (INP) ：衡量用户与页面交互后，浏览器响应并显示下一个视觉变化所花费的时间。INP取代了First Input Delay (FID)，更全面地反映了页面的交互性。为了提供良好的用户体验，INP应不超过200毫秒
Cumulative Layout Shift (CLS) ：衡量页面在加载过程中意外布局变化的程度。为了提供良好的用户体验，CLS应保持在0.1或更低
测试性能工具
1、 chrome 浏览器自带的 Lighthouse
Lighthouse主要三个指标：性能、可交互性、最佳实践
2、 使用 web-vitals 库
3、使用浏览器插件 Web Vitals
