LightHouse
网站性能检测有很多，最近学习使用了LightHouse，LightHouse 是 Google 开发的，它提供了一个基于浏览器服务的网站性能分析工具。LightHouse 使用了深度学习技术和大规模语言模型来预测代码中的性能瓶颈，并给出详细的分析报告。
以微软的Edge为例，打开控制台，点击右边的+，就能找到LightHouse，然后对你想要进行分析的网站进行
Lighthouse 主要监测指标
| 指标 | 说明 |
| ——————————– | ———————————————————— |
| 性能指标（Performance） | 页面的性能评分，包括：首次内容绘制（First Contentful Paint）、（Largest Contentful Paint）最大内容绘制、可交互时间（Time to Interactive）、速度指标（Speed Index）、（Cumulative Layout Shift）累计布局位移。 |
| 可访问性/无障碍（Accessibility） | 监测页面的可访问性与优化建议。 |
| 最佳做法（Best Practice） | 页面是否符合最佳实践。 |
| 搜索引擎优化（SEO） | 页面是否针对搜索引擎结果排名进行了优化。 |
| PWA（Progressive Web App） | 验证 PWA 的各个方面的性能情况。
性能指标
我们利用LightHouse做前端网站性能分析主要关注的就是Performance这一块，上面提到Performance页面的性能评分指标分为：**FCP (First Contentful Paint)、LCP(Largest Contentful Paint)、SI (Speed Index)、TBT(Total Blocking Time)、CLS(Cumulative Layout Shift)**，下面将具体的了解这几个东西
1.FCP
FCP（First Contentful Paint）即首次内容绘制。它统计的是从进入页面到首次有 DOM 内容绘制所用的时间。这里的 DOM 内容指的是文本、图片、非空的 canvas 或者 SVG。
FCP 和我们常说的白屏问题相关，它记录了页面首次绘制内容的时间。
下图可以看到为什么导致FCP慢，以及是什么导致FCP慢甚至点击蓝色的链接跳转相关如何解决这块的问题，能帮助我们快速定位到什么原因导致白屏的，已经响应的解决方案，红色的代表影响比较大，橙色是中等。
可以看到下面三条橙色的就是我们老生常谈的首屏优化，不过和红色一样，我们可以看到具体是哪里需要优化：
- 缩减 JavaScript
- 启用文本压缩
- 减少未使用的 CSS
2.LCP
LCP（Largest Contentful Paint）即最大内容绘制。它统计的是从页面开始加载到视窗内最大内容绘制的所需时间，这里的内容指文本、图片、视频、非空的 canvas 或者 SVG 等。
注意：FCP关注的是页面上任何内容的首次呈现时间，而LCP关注的是最大的内容元素的呈现时间。
例如：
这个图片太大了，完全呈现给用户需要1710毫秒，最大的内容渲染时间有点长了，所以我们就可以考虑优化这个块，压缩这个图片之类的。
3.SI
SI（Speed Index）即速度指数。Lighthouse 会在页面加载过程中捕获视频，并通过 speedline 计算帧与帧之间视觉变化的进度，这个指标反映了网页内容填充的速度。页面解析渲染过程中，资源的加载和主线程执行的任务会影响到速度指数的结果。
4.TBT
TBT（Total Blocking Time）是指在页面加载过程中，用户输入或交互受到阻塞的总时间。它衡量了在加载过程中由于JavaScript执行和主线程忙碌而导致用户输入延迟的总时间。 TBT 是 Web 性能指标之一，用于评估页面加载过程中的交互性能。
这个一般是由js引起，如下图：
TBT 的延迟通常由 JavaScript 的执行和主线程忙碌引起。当页面加载过程中存在大量的 JavaScript 代码执行或者主线程被长时间占用时，会导致用户输入或交互受到阻塞，从而增加 TBT。因此，优化 JavaScript 的加载和执行，以及减少主线程的繁忙程度，可以有助于减少 TBT。
根据上面提示，我们可以优化JavaScript 资源加载
资源加载的优化通常有几个思路：
CLS（Cumulative Layout Shift）即累计布局位移进行评估。这个指标是通过比较单个元素在帧与帧之间的位置偏移来计算
看的出来，使用LightHouse后很快可以定位到需要优化哪里
无障碍设计
Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是指所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。
比如：
Background and foreground colors do not have a sufficient contrast ratio. 这个意思就是某处文字背景色和文字颜色对比度不够，对于视障用户可能不好区分,展开可以看到具体是哪块元素。
最佳做法
est Practices 最佳做法 : 实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等
SEO
SEO（Search Engine Optimization）：搜索引擎优化检测，如网页 title 是否符合搜索引擎的优化标准等
总结
总之使用LightHouse对前端网站性能分析后，能帮助我们开发者定位到哪里需要优化，哪个图片太大影响正常资源加载等等，对应开发者来说是个不错的工具，当然也不一定非要按照上面提示的优化，开发者也肯定有自己的考量。我自己的网站性能指标在80左右就行了，懒得继续折腾了（手动狗头）。如果是公司的项目，能跑就行，哈哈！
八股总结
谈到性能优化，跑不掉的就是八股文，也总结一下。
- 使用lazy loading：通过将大量数据分成几块，用户只有点击触发某个特定的元素时，才会加载这部分数据。这样可以减少初始化数据时的性能开销。
- 使用虚拟scrolllist：通过将大量数据分成小块，并将其渲染为虚拟的滚动列表。这样可以减少渲染开销，提高用户体验。
- 使用图片懒加载：通过使用JavaScript或者在HTML属性中设置
onload事件，当图片加载完成时再显示，这样可以减少初始化时的性能开销。 - 使用预加载：通过在页面加载时预先加载一些数据和资源，当用户访问时可以更快地渲染。
- 使用现代前端框架：使用现代前端框架可以简化代码，提高性能，例如React、Vue、Angular等。
- 优化列表和数组操作：使用现代前端框架提供的列表和数组操作方法，可以减少代码量，提高性能。
- 使用Gzip压缩：通过在服务器端使用Gzip压缩静态资源，可以减少网络传输时的时间开销。
- 使用CDN：通过将静态资源部署到CDN服务器上，可以提高用户体验，减少网络传输时的时间开销。
- 优化DOM操作：在使用JavaScript操作DOM时，尽量减少操作的次数和复杂度，以提高性能。
- 使用事件代理：将事件监听器添加到父元素上，可以减少事件监听器的数量，提高性能。
