首先打开Chrome开发者工具的Performance面板，启用帧截图和内存监控后开始录制，执行页面操作或刷新页面以捕获性能数据；录制结束后分析FPS、CPU占用及主线程任务，定位卡顿原因，并通过CPU节流模拟低端设备测试网页兼容性。
如果您在使用谷歌浏览器时遇到页面加载缓慢、卡顿或资源占用过高的问题，可能是由于网页脚本、渲染或内存使用不当导致的。通过浏览器内置的性能信息中心，您可以记录并分析页面运行时的各项指标，从而定位性能瓶颈。以下是详细的使用方法。
本文运行环境：MacBook Pro，macOS Sonoma
一、打开开发者工具并启动性能面板
性能信息中心是Chrome开发者工具的一部分，用于记录和分析页面加载与交互过程中的性能数据。开启该功能是进行后续诊断的第一步。
1、点击浏览器右上角的三个垂直点图标，选择更多工具，然后点击开发者工具。
2、在打开的开发者工具窗口中，点击顶部的Performance选项卡，进入性能分析界面。
3、确认设置项已配置正确：点击右上角的齿轮图标，在Screenshots前打勾以启用帧截图，可选地勾选Memory以监控内存变化。
二、录制页面性能数据
录制功能可以捕获页面在特定时间段内的运行状态，包括加载、交互和渲染过程，为后续分析提供原始数据。
1、点击左上角的圆形Record按钮，开始录制性能数据。
2、在录制期间执行您想分析的操作，例如滚动页面、点击按钮或等待页面完全加载。
3、操作完成后，点击Stop按钮结束录制，系统将自动生成性能报告。
4、也可点击录制按钮旁边的Reload图标，在刷新页面的同时开始录制，适用于分析首次加载性能。
三、分析性能报告中的关键指标
录制结束后，性能面板会展示多维度的数据图表，帮助您识别性能问题的根源，重点关注帧率、CPU占用和函数调用情况。
1、查看FPS（Frames Per Second）帧率图：绿色条越高表示帧率越稳定，红色条表示存在掉帧，可能影响用户体验。
2、观察CPU使用率图：高占用区域对应具体的活动类型，如Scripting、Rendering或Painting，可用于判断瓶颈所在阶段。
3、展开下方的Main线程火焰图，查找长时间运行的任务，点击具体条目可在底部Bottom-Up或Call Tree标签中查看函数耗时详情。
4、利用时间轴上方的帧截图，逐帧查看页面渲染变化，结合时间线定位视觉卡顿的具体时刻。
四、模拟低性能设备进行测试
通过CPU节流功能，您可以模拟低端设备的运行环境，提前发现潜在的性能问题，确保网页在不同硬件上的兼容性。
1、在Performance面板的设置区域，找到CPU下拉菜单。
2、选择4x slowdown或6x slowdown，模拟处理器性能降低的场景。
3、重新录制页面行为，观察在低性能环境下是否出现明显卡顿或超长任务。
4、根据模拟结果优化JavaScript执行效率或减少重排重绘次数。
