前端性能指标

常用的几个指标

1. FCP (First Contentful Paint)首次内容绘制
   浏览器首次绘制来自dom的内容的时间，内容必须包括文本，图片，非白色的canvas或svg，也包括带有正在加载中的web文本字体，这是用户第一次看到的内容
   FCP指标
   0-2秒，绿色（快），FCP 75-100分
   2-4秒，橙色（中），FCP 50-74分
   超4秒，红色（慢），FCP 0-49分
2. LCP (Largest Contentful Paint)最大内容绘制
   最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户的可见时间
   LCP指标
   0-2.5秒 快
   2.5-4秒 中
   超4秒 慢
3. FID (First Input Delay)首次输入延迟
   首次输入延迟，从用户第一次与页面进行交互到浏览器实际能够响应该交互的时间，输入延迟是因为浏览器的主线程正忙于做其他事情，所以不能响应用户，发生这种情况的一个常见原因是浏览器正忙于解析和执行应用程序加载的大量计算的js
   FID指标
   0-100毫秒， 快
   100-300毫秒，中
   超过300， 慢
4. TTI (Time to Interactive)持续可交互时间
   网页第一次完全达到可交互状态的时间点，浏览器已经可以持续的响应用户的输入，完全达到可交互的状态的时间是在最后一个长任务完成的时间，并且在随后的5s内网络和主线程是空闲的。
   0-3.8秒，快
   3.9-7.3秒，中
   超7.3秒，慢
5. TBT (Total Block Time)总阻塞时间
   FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。只要存在长任务，该主线程就会被视为阻塞，该任务在主线程上运行超过50毫秒。
   线程阻塞是因为浏览器无法中断正在进行的任务，因此如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。
   0-300毫秒，快
   300-600毫秒，中
   超600毫秒，慢
6. CLS (Cumulative Layout Shift)累计布局位移
   CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，他是一种保证页面的视觉稳定性从而提升用户体验的指标方案。简单说就是当点击页面中的某个元素的时候，突然布局变了，手指点到了其它位置。比如想点击页面的链接，突然出现了一个banner。这种情况可能是因为尺寸未知的图像或者视频。
   0-0.1毫秒，快
   0.1-0.25毫秒，中
   超0.25，慢

Web Vitals

谷歌指定的性能指标标准，简化到了三个。加载性能LCP，交互性FID，视觉稳定性CLS。只需要做好这三个，网站的性能基本上就ok。测量web vitals的工具有很多，比如lighthouse、web-vitals、浏览器插件web vitals.

性能测试工具

1. lighthouse
   在浏览器的调试工具中默认就存在，会对页面进行一连串的测试，生成一个有关页面性能的报告。
2. 在线的性能测试工具 https://www.webpagetest.org
   提供多地点测试。只能测试已经发布了的网站。输入需要测试的网页地址，点击start test即可