许多的问题都会导致网页性能降低，比如频繁的操作DOM元素导致页面重排重绘过多、图片和媒体资源过大并且同时加载、过多的事件监听和请求等等。
在这里记录并分享一个查看网页帧率的办法：
浏览器：Chrome 版本：115.0.5790.110
打开 Chrome 浏览器，打开目标网页，F12 调用开发者工具，ctrl+p，在弹出输入框中输入>，搜索fps：
选择显示每秒帧数（FPS）计量器，计量器会在左上角打开。
一般，一个足够流畅的网页帧率要稳定在 60 帧以上，当页面性能较差，帧率较低时，交互就会发生明显可感知的卡顿，比如下拉滚轮这一动作。以一个网页博客为例，其帧率经常在 60 帧以下，显然就不怎么流畅了。
于是，需要进行进一步的性能分析，找到性能瓶颈并加以解决。网页性能分析比较方便的办法是使用谷歌自带的 Lighthouse，点击查看网页性能分析报告查看报告，进行性能分析：
可以看到， Lighthouse 给我们展现了 5 个指标，Performance、Accessibility、BestPractice、SEO、PWA，其含义是性能、访问无障碍、最佳实践、搜索引擎优化、渐进式网络应用程序。性能方面，我们主要关注 Performance 的分析报告。
Performance 分数主要由 metrics 指标所决定，其分为以下几个方面：
首屏渲染时间即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点；最大内容绘制时间测量用户从开始加载页面到视口中呈现最大图像或文本块的时间；总阻塞时间指长任务阻塞主线程并影响页面可用性的时间，衡量页面在能完全交互之前的无响应程度；累积局部变化衡量网页在其生命周期中意外变化的幅度，假如一个很长的条幅在加载过程中突然出现，就会很大程度上提高这个数值；速度指标衡量了首屏可见内容绘制到屏幕上的速度。
我们看到限制分数的主要是 FCP、LCP 和 Speed Index，这三项指标的瓶颈到底在哪里？如何优化这三项指标呢？
优化机会提供了网页优化可能的建议，发现这位仁兄的图片有很大问题，基本都是建议减小图片尺寸、使用新一代（WebP、AVIF）格式的图片取代 jpg、png 文件。另外，网页插件造成了一部分网页卡顿问题，这也提示我们减少不必要的插件使用，特别是需要向第三方发送请求的插件。这也提示了我们在上传博客图片资料时，需要对图片进行适当裁剪和压缩，当然，普通网站的静态资源有很多其他优化的办法，比如使用 CDN 加速，通过 gzip 等压缩技术进行压缩，添加缓存和懒加载等等。
