如何通过Chrome浏览器查看当前页面的渲染性能【解答】

如何通过Chrome浏览器查看当前页面的渲染性能

来源：谷歌浏览器官网 作者：浏览器迷

2025/01/04

要通过Chrome浏览器查看当前页面的渲染性能，您可以使用开发者工具中的“Performance”面板。以下是详细的步骤：

如何通过Chrome浏览器查看当前页面的渲染性能1

-在Chrome浏览器中，按下`F12`键或右键点击页面，然后选择“检查”来打开开发者工具。

如何通过Chrome浏览器查看当前页面的渲染性能2

-或者，您可以通过菜单栏进入：`更多工具-开发者工具`。

如何通过Chrome浏览器查看当前页面的渲染性能3

2.切换到“Performance”面板：

-在开发者工具窗口中，您会看到多个标签页，如“Elements”、“Console”等。点击“Performance”标签页以切换到性能面板。

如何通过Chrome浏览器查看当前页面的渲染性能4

3.录制性能分析：

-在“Performance”面板中，有一个红色的圆形按钮，这是录制按钮。点击它开始录制页面的性能数据。

-进行一些页面操作，比如滚动、点击链接、加载资源等，以便捕获相关的性能数据。

-完成操作后，再次点击红色按钮停止录制。

4.分析性能数据：

-录制完成后，您将看到一条时间轴，上面显示了页面加载和操作期间的各种性能事件。

-时间轴上的颜色条表示不同类型事件的持续时间，例如蓝色表示JavaScript执行时间，黄色表示布局计算时间，紫色表示输入事件处理时间等。

-您可以拖动时间轴上的滑块来放大特定时间段，以便更详细地查看性能数据。

-点击时间轴上的任何事件，可以查看该事件的详细信息，包括调用堆栈、事件持续时间等。

5.查看FPS（帧率）信息：

-在“Performance”面板中，还有一个“FPS”选项卡，您可以切换到该选项卡查看页面的帧率信息。

-帧率是衡量网页动画流畅度的重要指标，通常来说，帧率越高，页面动画越流畅。

6.使用Lighthouse进行性能评估：

-另外，您还可以使用Chrome的Lighthouse工具来对页面进行全面的性能评估。

-在开发者工具中，点击“Lighthouse”标签页，然后点击“生成报告”按钮。

如何通过Chrome浏览器查看当前页面的渲染性能5

-Lighthouse会分析页面的性能、可访问性、最佳实践等方面，并给出相应的评分和改进建议。

通过以上步骤，您可以详细了解当前页面的渲染性能，并根据需要采取优化措施。希望这些指导能帮助您更好地理解和提升Chrome浏览器的使用体验！